Question

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

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

用于文件上传的Html输入

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

在我的角度组件中，我设置了eventListner和File阅读器。

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变量？

Answer 1

这样做：

\n

所以你可以访问你的变量。

有关更详细的说明：https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

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

为我工作的是什么；

JSON.parse(fileReader.result as string)

Answer 3

使用较新版本的Angular，您甚至不能像以下答案中那样将其转换为字符串，但是首先您必须转换为unknown，然后转换为字符串。例如

JSON.parse(fileReader.result as unkown as string)

Answer 4

它起作用了，像这样尝试...

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);
            }
            );
        }
    }

从Angular 2中的FileReader获取数据

4 个答案: