input type=file 捕捉完成选择事件

最新推荐文章于 2025-05-23 18:04:24 发布

不积跬步,无以至千里.

最新推荐文章于 2025-05-23 18:04:24 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Mweb_demo/article/details/110001580

JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种解决在使用FileReader API时，连续两次上传相同文件导致无法触发读取事件的方法。通过将input元素的value属性清空，确保每次都能正确触发文件读取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：第一次选择文件或每次都选择不同文件时好使，但如果我两次都选择同一个文件，就触发不了了；
解决：将value置为空，就解决了。

  importMetaDataObject(e: any): void {
    if (!window.FileReader) {
      this.$notify.error('您的浏览器不支持FileReader！请升级浏览器');
      return;
    }
    let reader: any = new FileReader();
    const self: any = this;
    reader.onload = (): any => {
      const fileData = reader.result;
      const wb = XLSX.read(fileData, {
        type: 'binary'
      });
      const excelTd = wb.SheetNames.map((key: any) => XLSX.utils.sheet_to_json(wb.Sheets[key]));
      const data = {
        metaattrsList: excelTd[1],
        metamappingList: excelTd[2],
        metaObjList: excelTd[0]
      };
      self.http
        .post('xxx/xxxx/xxx ', data)
        .then((res: any) => {
          if (res.statusCode == 0) {
            self.$notify.success(res.repMessage);
            reader = null;
            self.$refs.impData.value = '';
          }
        });
    };
    reader.readAsBinaryString(e.target.files[0]);
    e.target.files = null;
  }