<input type="file" @change="onFileChange" />
input change事件的机制只有 value 发生改变的时候触发,
因为第二次上传相同文件 value 不变所有不会触发 change 事件,
这时就要想办法在第一次上传时把value 值赋空,
应该在拿到上传所需数据后把 input 的 value 值赋空,这样第二次上传的时候 change事件就会触发;
/**
* @description: 新增
*/
async onFileChange(e: any) {
const files = e.target.files;
if (!files.length) return;
const formData = new FormData();
formData.append("file", files[0]);
this.$toast.loading({
message: "上传中...",
forbidClick: true,
});
const filename = files[0].name;
e.target.value = "";// 同一文件不能重复上传问题
try {
const { fileName } = await uploadImage(formData);
const josn = {
filename, // 文件名
path: fileName, // 文件上传的相对路径
};
await addDoc(josn);
this.$toast.success("上传成功");
this.apiData.pageNum = 1;
this.tableData = [];
this.getList();
} catch (error) {
this.$toast(`${(error as any).message}`);
}
}