reactjs - 在 react js 中使用 filereader 读取多个文件

Question

我尝试上传多个文件并想读取文件的内容以加密数据。我可以正确读取单个文件，但是在上传多个文件时无法读取错误阅读器正忙。如果我在 onloadend 时创建新的 Filereader，它会给我内容的空值。

React JS - 示例代码：

let reader = new FileReader();
class FilReaderComp extends Component {
constructor(props) {
super(props);
this.state = {

}}
upLoadFileFolderFunc(e){
e.preventDefault();
let fileitemsList = e.target.files;
for (let i = 0; i < fileitemsList.length; i++) {
  let fileitems = fileitemsList[i];
  reader.onloadend = this.handleFileRead;
  reader.readAsText(fileitems);
  }
}

handleFileRead = (e) => {
const content = reader.result; here am reading content of the file

//here doing my function after getting content
}
render(){
return(
<input  type="file" className="custom-file-input" style={{display:"hide"}}
            onChange={this.upLoadFileFolderFunc} multiple/>
);}

export default withRouter(FilReaderComp);

标签： reactjsfilereader

Answer 1

尝试将您的 onload 函数包装在另一个函数中，并将文件读取器包含在循环中。在这里，闭包使您可以访问通过变量依次处理的每个文件f：

function openFiles(evt){
    var files = evt.target.files;

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        var reader = new FileReader();

        reader.onload = (function(f) {
            return function(e) {
                // Here you can use `e.target.result` or `this.result`
                // and `f.name`.
            };
        })(file);

        reader.readAsText(file);
    }
}