Чтение нескольких файлов cotent's 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)
        }
    );

 }

В массиве файлов нам нужно l oop поверх файлов и отправить другим функциям, чтобы записать содержимое каждого файла в массив. После некоторой отладки, например для 2 файлов, похоже, что код выполняет handleFileChosen 2 раза, а затем переходит к handleFileReader 2 раза, что, вероятно, не так, но я не уверен, как это исправить. Вместо этого должно быть так: выполнить HandleFileReader, затем выполнить handleFileChosen, затем снова HandleFileReader, затем выполнить handleFileChosen

Answer 1

Найдите полный код, чтобы показать, как читать содержимое нескольких файлов. В событии handleUpload я подготовил AllFiles и вызвал функцию readAllFiles, передав AllFiles. Затем я вызвал readFileContents под readAllFiles, который на самом деле читает содержимое файла. Поскольку FileReader работает asynchronously, здесь необходимо использовать Promise.

Вот песочница кода

Вот код :

import React, {Component} from 'react';

export default class FileReaderExample extends Component {

    readFileContents = 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 this.readFileContents(file);
            return fileContents;
        }));
        console.log(results, 'resutls');
        return results;
    }

    handleUpload = (e) => {
        let AllFiles = [];
        [...e.target.files].map(file => AllFiles.push(file));

        this.readAllFiles(AllFiles).then(result => {
            let preview = document.getElementById('showText');
            let allFileContents = "";
            result.map(res =>{
                allFileContents += res + '<br/>'
            })
            preview.innerHTML = allFileContents;
        })
            .catch(err => {
                alert(err);
            });
    }

    render = () => {

        return (<div>
                <input type="file" multiple onChange={(e) => this.handleUpload(e)}/>
                <div id="showText">Choose text File</div>
            </div>
        )
    }
}

Answer 2

arr.map() равно synchronous, а FileReader работает asynchronously, используйте Promise.all в массиве, возвращаемом map

Ref: 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;
}