如何读取angular中上传文件的内容？

Question

我目前正在开发一个 angular 项目，在该项目中，用户通过将文件拖放到指定区域来上传文件。然后，我想将文件内容发送到后端存储在mongo中。不幸的是，它发送的是文件名，但内容不是。我尝试使用 FileReader() 读取文件的内容，但我无法让它工作。关于读取文件内容的 best/easiest 方式有什么想法吗？

我希望能够将内容存储到一个变量中，而不仅仅是 console.log()。我认为这会让 post 更容易，但欢迎所有建议。谢谢！

注意：为了缩短这段时间，我只在我认为可以完成逻辑的地方添加了这段代码，但如果有帮助，我可以添加更多内容。

    @HostListener('drop', ['$event']) public ondrop(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    this.background = '#f5fcff'
    this.opacity = '1'
    let files = evt.dataTransfer.files;

    // I tried to read the file content here trying to do reader.readAsText(files); but it did not work

    if (files.length > 0) {
      this.onFileDropped.emit(files)
    }

  }

Answer 1

您不应该阅读文件内容。您应该将文件作为表单数据附加到请求体中并发送。如果您仍想阅读它，可以使用一些库将该文件转换为 json 对象。对于直接发送文件，请参考下面的代码：-

const formData = new FormData();  
formData.append('file', file.data);  
this.httpClient.post<any>(this.SERVER_URL, formData).subscribe();

如何读取angular中上传文件的内容？

How to read the content of an uploaded file in angular?

file

filereader

angular2-forms

angular2-directives

angular