Question

尝试做我想做的事应该相对简单。

我只想读取文本文件的内容并将其存储在变量中。

这是我的代码：

readToCSV(file) {
// console.log(file);

    let cat = "";

    var reader = new FileReader();
    reader.onloadend = function (event) {
        if (event.target.readyState == FileReader.DONE) {
            var data = event.target.result;
        }
        console.log("data:", data)
        cat = data;
    };

    reader.readAsText(file)
    console.log("cat:",cat);


};

我已经尝试了几乎所有内容，并在函数外不断变得不确定。我是否只需要在onloadend函数中嵌套任何进一步的处理。真傻。

Answer 1

我只想读取文本文件的内容并将其存储在变量中。

由于FileReader的异步特性，cat将是一个空字符串，这是您当前的操作方式。

我会通过回调来实现。

var cat = '';
const reader = new FileReader();
reader.readAsText(document.querySelector('input[type="file"]').files[0]);
reader.onload = () => storeResults(reader.result);

function storeResults(result) {
  cat = result;
}

这样，您就可以完成工作，而不必直接在onloadend中嵌套进一步的处理。
希望有帮助！

Answer 2

好吧，所以我找到了一个解决方法，并希望将其发布给其他试图将fileContents转化为真正内容的人（严重的是，为什么要这么难）

无论如何，我最终将读者包裹在一个诺言中并加以保存。

无论如何，新代码如下：

async handleFileUpload(e){
    console.log("e",e)
    await this.setState({file:e[0]})
    console.log("state: ",this.state.file)
       const fileContents = await this.readToText(this.state.file)
       console.log("fc:",fileContents);
    //await this.readToCSV(fileContents)
}

async readToText(file) {

    const temporaryFileReader = new FileReader();

    return new Promise((resolve, reject) => {
        temporaryFileReader.onerror = () => {
            temporaryFileReader.abort();
            reject(new DOMException("Problem parsing input file."));
        };

        temporaryFileReader.onload = () => {
            resolve(temporaryFileReader.result);
        };
        temporaryFileReader.readAsText(file);
    });

};

将fileReader的内容存储在变量中

2 个答案: