Javascript 读取多个文件内容'；s反应JS_Javascript_Reactjs_File

Javascript 读取多个文件内容'；s反应JS

javascript reactjs file

Javascript 读取多个文件内容'；s反应JS,javascript,reactjs,file,Javascript,Reactjs,File,我试图用React.js读取多个文件，但我的代码只读取一个文件，不读取其余文件。有什么建议吗谢谢 constructor(props) { super(props); this.state = { files: [], changedFileIndex: -1, fileReader : null }; this.fileUploaderRef = React.createRef(); } handleFile

我试图用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个文件，代码似乎执行了“HandleFileSelected”2次，然后转到handleFileReader 2次，这可能是错误的，但我不确定如何修复此问题。相反，它应该是这样的：执行'HandleFileReader'，然后执行'HandleFileSelected'，然后再次执行'HandleFileReader'，然后执行'HandleFileSelected'

arr.map（）

是同步的，FileReader是异步的，使用

Promise.all

在map返回的数组上

参考：

我已修改您的函数以读取所有文件

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

arr.map（）

是

同步的

文件阅读器异步工作，使用

Promise.map返回的数组上的所有

参考：

我已修改您的函数以读取所有文件

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

请查找显示如何读取多个文件内容的完整代码。在

handleUpload

事件中，我准备了

AllFiles

并通过传递

AllFiles

调用函数

readAllFiles

。然后我在实际读取文件内容的

readAllFiles

下调用了

readFileContents

。由于FileReader异步工作，因此需要在此处使用

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>
        )
    }
}

import React，{Component}来自'React'；
导出默认类FileReaderExample扩展组件{
readFileContents=异步（文件）=>{
返回新承诺（（解决、拒绝）=>{
让fileReader=newFileReader（）；
fileReader.onload=（）=>{
解析（fileReader.result）；
};
fileReader.onerror=拒绝；
readAsText（文件）；
});
}
readAllFiles=async（所有文件）=>{
const results=wait Promise.all（AllFiles.map）（异步（文件）=>{
const fileContents=wait this.readFileContents（文件）；
返回文件内容；
}));
日志（结果“resultls”）；
返回结果；
}
handleUpload=（e）=>{
让所有文件=[]；
[…e.target.files].map（文件=>AllFiles.push（文件））；
这个.readAllFiles（AllFiles）.then（result=>{
让preview=document.getElementById（'showText'）；
让allFileContents=“”；
result.map（res=>{
allFileContents+=res+'
'
})
preview.innerHTML=所有文件内容；
})
.catch（错误=>{
警惕（err）；
});
}
渲染=（）=>{
返回(
this.handleUpload（e）}/>
选择文本文件
)
}
}

请查找完整的代码，以显示如何读取多个文件内容。在

handleUpload