input file文件上传同一个文件第二次上传无效

完整代码： 

<van-icon :name="shooting" size="50px" @click="handleAddImg(index)" v-if="!item.url"/>
          <input type="file" accept="image/*" hidden id="fileInput" @change="handleFileChange" name="file" ref="file" />

// 添加图片
    handleAddImg(index){
      document.querySelector('#fileInput').click();
      this.uploadIndex = index;
    },

handleFileChange(e){
      //删除之前上传的文件
      if (this.dedutionObj.taxVerificationInfoVos[this.uploadIndex].url!== '') {
        deleteFile({fileUrl: this.dedutionObj.taxVerificationInfoVos[this.uploadIndex].url}).then(res =>{
        })
      }
      const file = e.target.files[0];
      console.log(file,"file");
      if (!file) {
        return
      }
      let size = Math.floor(file.size / 1024);
      console.log(size,"文件大小");
      if (size > 10 * 1024 * 1024) {
        this.$toast("请选择10M以内的图片！");
        return;
      }
      const formData = new FormData();
      formData.append("file", file);
      uploadImg(formData).then(res => {
        if (res.code == 200) {
          console.log(res.data,"图片提交");
          this.dedutionObj.taxVerificationInfoVos[this.uploadIndex].url = res.data;
          console.log(this.dedutionObj.taxVerificationInfoVos,"抵扣图片添加");
          e.target.value = "";
        } else {
          this.$toast(res.msg);
        }
      });

    },

 

解决办法：

调用删除接口

上传成功之后记得清除文件，把input的value重新设置为空

e.target.value = ""

使用input[type=file] 实现文件上传功能，通过onchange事件触发，这个时候第一次上传是完全没问题的，或者更换其他文件也没问题，当你第二次上传同一文件时，就会出现两次上传的文件重复的问题，就会上传失败 无效；