上傳圖片相關問題 input框type=file設置cursor:pointer的問題

input框type=file設置cursor:pointer的問題

 

爲了讓美化上傳文件框，設置了cursor:pointer;,然而不起做用，而後百度找到了解決方法，設置font-size:0，這樣就能夠了。

 

使用 vue-lazyload 當須要動態切換圖片時，DOM綁定的圖片不會變，查看插件官方文檔跟demo都沒有說到這一問題， 難道這個問題就不能解決了，後翻了翻Issuse恰好前輩提了這一問題，原來須要加個 key，遂加之則圖片就能夠動態切換了，

<img v-lazy="ImgSrc" :key="ImgSrc">

 

 1 <div class="form-opt">
 2             <p>
 3               <i></i>
 4               <span>圖片</span>
 5               <input
 6                 type="file"
 7                 class="upload"
 8                 @change="addImg"
 9                 ref="inputer"
10                 multiple
11                 accept="image/png, image/jpeg, image/gif, image/jpg"
12               >
13             </p>
14             <a href="javascript:;" class="form-pushbtn" @click="commentPublish">發佈</a>
15           </div>
16           <div v-show="isShowImg" class="form-img">
17             <div class="comment-img-pop">
18               <div class="comment-pop-title">
19                 <span>選擇圖片</span>
20                 <a href="javascript:;" @click="closeImg">x</a>
21               </div>
22               <div v-if="imgArray.length" class="comment-pop-imgs">
23                 <div class="comment-img-item" v-for="(item, index) in imgArray" :key="index">
24                   <p class="img">
25                     <img v-lazy="item" :key="item">
26                     <a class="close" @click="delImg(index)">×</a>
27                   </p>
28                 </div>
29               </div>
30             </div>
31           </div>

 1 addImg(event) {
 2       this.isShowImg = true;
 3       let inputDOM = this.$refs.inputer;
 4       // 經過DOM取文件數據
 5       this.fil = inputDOM.files;
 6       if (this.fil.length <= 0) return;
 7 
 8       let oldLen = this.imgLen;
 9       let len = this.fil.length + oldLen;
10       if (len > 9) {
11         alert("最多可上傳9張，您還能夠上傳" + (9 - oldLen) + "張");
12         return false;
13       }
14       for (let i = 0; i < this.fil.length; i++) {
15         this.imgLen++;
16         this.formData.append("image", this.fil[i]);
17         api
18           .post(
19             `http://test.appapi.joyme.com/upload/image?platform=0`,
20             this.formData
21           )
22           .then(res => {
23             if (filterData(res.data)) {
24               let imgUrl = res.data.data.url;
25               this.imgArray.push(imgUrl);
26             }
27           })
28           .catch(err => {
29             // console.log(err);
30           });
31       }
32     },

delImg(index) {
      this.imgLen--;
      this.imgArray.splice(index, 1);
      if (!this.imgArray.length) this.isShowImg = false;
},
closeImg() {
      this.isShowImg = false;
      this.imgArray = [];
      this.imgLen = 0;
},