在 Angular 2 中使用 FileReader 上传文件并读取数据答案

【问题标题】：Upload a File and Read Data with FileReader in Angular 2在 Angular 2 中使用 FileReader 上传文件并读取数据
【发布时间】：2016-11-28 11:28:26
【问题描述】：

我正在尝试在 Angular 2 ts (2.2.1) 中创建一个上传表单，它允许上传例如CSV 文件，但不是将文件直接发送到 http 服务，我希望文件首先在浏览器中进行验证。

到目前为止，我已经可以使用以下代码上传文件并在控制台中打印：

文件上传的HTML输入

<input type="file" (change)="changeListener($event)" #input />

在我的 Angular 组件中，我设置了 eventListner 和文件阅读器。

export class UploadComponent {

    public fileString;

    constructor() {
        this.fileString;
    }

    changeListener($event): void {
            this.readThis($event.target);
        }

    readThis(inputValue: any): void {
        var file: File = inputValue.files[0];
        var myReader: FileReader = new FileReader();
        var fileType = inputValue.parentElement.id;
        myReader.onloadend = function (e) {
            //myReader.result is a String of the uploaded file
            console.log(myReader.result);

            //fileString = myReader.result would not work, 
            //because it is not in the scope of the callback
        }

        myReader.readAsText(file);
    }
}

到目前为止，这段代码运行良好。

但是我还没有找到一种方法来存储来自阅读器的数据，让我可以使用我的角度组件访问它。

myReader.onloadend() 回调函数无权访问组件的变量。有没有办法注入这些变量？

如何将读取的数据放入组件中的fileString 变量中？

【问题讨论】：

答案（stackoverflow.com/a/40843316/1908296）正确和准确的问题需要但是我想通知这个答案会将文件阅读器的结果作为二进制字符串而不是原始字符串值。
检查这个问题stackoverflow.com/q/47151035/1908296，如果需要加载原始CSV文件内容

标签： javascript angular typescript filereader

【解决方案1】：

这样做：

myReader.onloadend = (e) => {
   console.log(myReader.result);
   this.fileString = myReader.result as string;
};

这样你就可以访问你的变量了。

更详细的解释：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：

完美答案
根据我的 linter，但是，完成加载的 FileReader 的结果属性可能是 ArrayBuffer 或字符串。你可能应该为此做好准备。
你能告诉我如何从 onload 函数中调用函数吗？
哪个函数？只需这样做：this.myFunction("test");
@bluppfisk 是也不是。您在result 中获得的输出取决于您调用的readAs... 方法。阅读每个读取方法的文档会告诉您它是什么。因此，转换为字符串（或 ArrayBuffer）是 100% 安全的假设您知道使用了哪种读取方法 - 实际上这通常是已知的。具体结果将是一个 ArrayBuffer if 您称为 readAsArrayBuffer.

【解决方案2】：

mxii 的答案隐式转换为字符串，这对我不起作用，也许使用较新版本的 Angular 不再允许。

对我有用的是；

JSON.parse(fileReader.result as string)

【讨论】：

【解决方案3】：

行得通，试试这样...

this.uploader.uploadAll = () => {
        console.log(this.uploader.queue.length)
        let fileCount: number = this.uploader.queue.length;
        if (fileCount > 0) {
            this.uploader.queue.forEach((val, i) => {
                var reader = new FileReader();
                reader.onloadend = (e) => {
                    var result = reader.result;
                    console.log(i + '/' + result)
                    this.file64.push(result)
                };
                reader.readAsDataURL(val._file);
            }
            );
        }
    }

【讨论】：