javascript - 读取多个文件 cotent 的 React JS

Question

我正在尝试使用 React.js 读取多个文件，但我的代码只读取一个文件而不会读取其余文件。有什么建议吗？

谢谢

constructor(props) {
    super(props);
    this.state = {
        files: [],
        changedFileIndex: -1,
        fileReader : null
    };
    this.fileUploaderRef = React.createRef();
}

 handleFileReader = (e)=>{
    console.log("handleFileReader")
     var content =this.state.fileReader.result;
     console.log(content);
 }

  handleFileChosen(file){
    console.log("handleFileChosen")
    console.log(file.result)
     this.state.fileReader=new FileReader();
     this.state.fileReader.onloadend = this.handleFileReader;
     this.state.fileReader.readAsText(file);   

 }


async readAllFiles (AllFiles) {
    console.log("readAllFiles")
    //console.log(AllFiles[0].name)
   AllFiles.map((file)=>
       {  
               this.handleFileChosen(file)
        }
    );

 }

在文件数组中，我们需要遍历文件并发送给其他函数，以便将每个文件的内容写入数组中。经过一些调试后，例如对于 2 个文件，代码似乎执行了“handleFileChosen”2 次，然后转到 handleFileReader 2 次，这可能是错误的，但我不确定如何解决这个问题。相反，它应该是这样的:执行“HandleFileReader”，然后执行“handleFileChosen”，然后再次执行“HandleFileReader”，然后执行“handleFileChosen”

Answer 1

arr.map() 是同步，FileReader 是异步，在数组上使用Promise.all由 map 返回

引用:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

我修改了你的函数来读取所有文件

handleFileChosen = async (file) => {
  return new Promise((resolve, reject) => {
    let fileReader = new FileReader();
    fileReader.onload = () => {
      resolve(fileReader.result);
    };
    fileReader.onerror = reject;
    fileReader.readAsText(file);
  });
}


readAllFiles = async (AllFiles) => {
  const results = await Promise.all(AllFiles.map(async (file) => {
    const fileContents = await handleFileChosen(file);
    return fileContents;
  }));
  console.log(results);
  return results;
}