上传图片相关问题

input框type=file设置cursor:pointer的问题

 

为了让美化上传文件框，设置了cursor:pointer;,然而不起作用，然后百度找到了解决方法，设置font-size:0，这样就可以了。

使用 vue-lazyload 当需要动态切换图片时，DOM绑定的图片不会变，查看插件官方文档跟demo都没有说到这一问题， 难道这个问题就不能解决了，后翻了翻Issuse刚好前辈提了这一问题，原来需要加个 key，遂加之则图片就可以动态切换了，

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

<div class="form-opt">
            <p>
              <i></i>
              <span>图片</span>
              <input
                type="file"
                class="upload"
                @change="addImg"
                ref="inputer"
                multiple
                accept="image/png, image/jpeg, image/gif, image/jpg"
              >
            </p>
            <a href="javascript:;" class="form-pushbtn" @click="commentPublish">发布</a>
          </div>
          <div v-show="isShowImg" class="form-img">
            <div class="comment-img-pop">
              <div class="comment-pop-title">
                <span>选择图片</span>
                <a href="javascript:;" @click="closeImg">x</a>
              </div>
              <div v-if="imgArray.length" class="comment-pop-imgs">
                <div class="comment-img-item" v-for="(item, index) in imgArray" :key="index">
                  <p class="img">
                    <img v-lazy="item" :key="item">
                    <a class="close" @click="delImg(index)">×</a>
                  </p>
                </div>
              </div>
            </div>
          </div>

addImg(event) {
      this.isShowImg = true;
      let inputDOM = this.$refs.inputer;
      // 通过DOM取文件数据
      this.fil = inputDOM.files;
      if (this.fil.length <= 0) return;

      let oldLen = this.imgLen;
      let len = this.fil.length + oldLen;
      if (len > 9) {
        alert("最多可上传9张，您还可以上传" + (9 - oldLen) + "张");
        return false;
      }
      for (let i = 0; i < this.fil.length; i++) {
        this.imgLen++;
        this.formData.append("image", this.fil[i]);
        api
          .post(
            `http://test.appapi.joyme.com/upload/image?platform=0`,
            this.formData
          )
          .then(res => {
            if (filterData(res.data)) {
              let imgUrl = res.data.data.url;
              this.imgArray.push(imgUrl);
            }
          })
          .catch(err => {
            // console.log(err);
          });
      }
    },

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