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

前端文件上传与删除实现及常见问题解析

原创已于 2022-08-04 18:39:07 修改 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-06-08 12:00:35 首次发布

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

本文详细介绍了前端使用input[type=file]实现图片上传功能，包括点击图标触发文件选择，文件大小检查，上传图片到服务器以及上传成功后的文件URL替换。同时，文章提到了一个常见问题：当尝试上传同一文件时可能会导致上传失败，并给出了解决方案——调用删除接口并在上传成功后清空input的value。

完整代码：

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

},