第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

讀取多個文件cotent的React JS

讀取多個文件cotent的React JS

慕萊塢森 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)        }    ); }在文件數(shù)組中，我們需要遍歷文件并發(fā)送到其他函數(shù)，以便將每個文件的內(nèi)容寫入數(shù)組中。經(jīng)過一些調(diào)試，例如對于 2 個文件，看起來代碼執(zhí)行 'handleFileChosen' 2 次，然后轉(zhuǎn)到 handleFileReader 2 次，這可能是錯誤的，但我不知道如何解決這個問題。相反，它應(yīng)該是這樣的：執(zhí)行“HandleFileReader”，然后執(zhí)行“handleFileChosen”，然后再次執(zhí)行“HandleFileReader”，然后執(zhí)行“handleFileChosen”
查看完整描述

2 回答

?
溫溫醬

TA貢獻1752條經(jīng)驗 獲得超4個贊

arr.map()issynchronous和 FileReader 有效asynchronously，Promise.all在 map 返回的數(shù)組上使用

參考： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

我修改了你的函數(shù)來讀取所有文件

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;

}


查看完整回答
反對 回復(fù) 2022-10-08
?
料青山看我應(yīng)如是

TA貢獻1772條經(jīng)驗 獲得超8個贊

請找到完整的代碼以顯示如何讀取多個文件內(nèi)容。如果handleUpload我準(zhǔn)備并通過傳遞來AllFiles調(diào)用該函數(shù)。然后我打電話說實際上是在讀取文件內(nèi)容。由于 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>

        )

    }

}


查看完整回答
反對 回復(fù) 2022-10-08
  • 2 回答
  • 0 關(guān)注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號