上传图片相关问题

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;
},

 

转载于:https://www.cnblogs.com/xfcao/p/10564866.html