實現(xiàn)思路：用一個大盒子包含兩個小盒子英岭，第一個盒子用來顯示上傳成功的圖片地址；第二個盒子里面有兩個元素：一個input框（選擇圖片）,一個div；? 將input框和div的寬高設(shè)置為相同（例如都是width:100px;height:100px）,input設(shè)置為絕對定位（絕對定位的元素會浮在上方，意思就是input的z-index比div要高，這樣點(diǎn)擊的時候就是點(diǎn)擊的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框節(jié)點(diǎn)，用來后面改變input框的類型實現(xiàn)是否可以上傳同一張圖片
? ? ? ? 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;
? }
}
