首頁猿問讀取多個文件cotent的Reac...

讀取多個文件cotent的React JS

JavaScript

慕萊塢森 2022-10-08 15:27:00

我正在嘗試使用 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”

查看完整描述

2 回答

溫溫醬

TA貢獻1752條經驗獲得超4個贊

arr.map()issynchronous和 FileReader 有效asynchronously，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;

}

反對回復 2022-10-08

料青山看我應如是

TA貢獻1772條經驗獲得超8個贊

請找到完整的代碼以顯示如何讀取多個文件內容。如果handleUpload我準備并通過傳遞來AllFiles調用該函數。然后我打電話說實際上是在讀取文件內容。由于 FileReader 工作，所以需要在這里使用。readAllFilesAllFilesreadFileContentsreadAllFilesasynchronouslyPromise

這是代碼沙箱

這是代碼：

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>

)

}

反對回復 2022-10-08

2 回答
0 關注
126 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

讀取多個文件cotent的React JS

讀取多個文件cotent的React JS

2 回答

添加回答