input formData文件上传,处理同一文件不能二次上传问题

  <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}`);
    }
  }
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值