上传图片（vue.js）及布局

实现思路：用一个大盒子包含两个小盒子，第一个盒子用来显示上传成功的图片地址；第二个盒子里面有两个元素：一个input框（选择图片）,一个div；  将input框和div的宽高设置为相同（例如都是width:100px;height:100px）,input设置为绝对定位（绝对定位的元素会浮在上方，意思就是input的z-index比div要高，这样点击的时候就是点击的input从而选择图片）；

html代码：

<div class="bq-add-img-div">

    <div class="bq-ai-image" v-for="(item,index) in pubImage">

        <img class="bq-img-add" :src="imgUrl + item" @click.stop="delImg(index)">

    </div>

    <div class="bq-ai-add-img">

        <input type="file" name="file" id="input" class="bq-sc" ref="qrCodefile"

              accept="image/*" @change="changeImage()">

        <img src="../../image/pub_pw_addImg.png" class="bq-ppi-add-img">

    </div>

</div>

js代码：

changeImage() {

        let oFile =this.$refs.qrCodefile;  //获取input框节点，用来后面改变input框的类型实现是否可以上传同一张图片

        var formData =new FormData();

        formData.append('file', $('#input')[0].files[0]);

        console.log(formData)

        console.log($('#input')[0].files[0]);

        $.ajax({

            ...

            // $("#input").attr("type","text");

            // $("#input").attr("type","file");

            oFile.setAttribute('type', 'text');  //改变input框type为text

            oFile.setAttribute('type', 'file');   //改变input框type为file

        })

}）

css样式：

.bq-add-img-div {

  margin-top:2%;

  padding:1%;

  width:96%;

  margin-bottom:40px;

  height:auto;

  background:white;

  display:flex;

  flex-direction:row;

  flex-wrap:wrap;

  align-items:center;

  .bq-ai-image {

    width:33%;

    height:100%;

    margin-bottom:2%;

    //border: 1px solid black;

    text-align:center;

    position:relative;

  }

  .bq-ai-image:after {

    content:"";

    background-image:url("../image/pub_wel_close.png");

    display:inline-block;

    position:absolute;

    top:2%;

    right:8.5%;

    background-size:16px;

    width:16px;

    height:16px;

    //border: 1px solid red;

  }

}