Question

我正在尝试将 Excel 文件上传到我的 React 应用程序。我正在使用事件侦听器，但它只是在我第一次上传文件时“拾取”数据。例如，我启动我的本地服务器，然后上传一个文件，test1.xlsx 这可以正常工作。然后我上传第二个文件，test2.xlsx。这也有效。但是，现在如果我尝试上传 test1.xslx 或 test2.xlsx。控制台中不会出现任何内容。我的代码如下：

const input = document.getElementById('input-data')
    if(input){
        input.addEventListener('change', () => {
            var data = [];
            readXlsxFile(input.files[0]).then((rows) => {
                data.push(rows)
            })
            console.log(data)
        })
    }

我对这一切还很陌生，所以我不确定是否有除 'change' 之外的事件侦听器会更好，或者是否与浏览器存储数据的方式有关。让我知道！

Answer 1

我在这方面取得了成功（仅显示骨架，但使用此结构加载图像）：

<input onInput={onSelectFile} type="file" ... />

和

const onSelectFile = (e) => {
  const onLoadFn = (dataURL) => {
    // processing goes here, maybe something like
    setImage(dataURL);
  };

  if (e.target.files && e.target.files.length > 0) {
    const reader = new FileReader();
    reader.addEventListener("load", () => onLoadFn(reader.result));
    reader.readAsDataURL(e.target.files[0]);
    // setState etc could go here, something like
    setDialogOpen(true);
  }
};

添加事件侦听器以上传每次“触发”的文件

1 个答案: