如何讀取angular中上傳文件的內容？

Question

我目前正在研究 angular 項目，其中用戶通過將文件拖放到指定區域來上傳文件。 然后，我想將文件內容發送到后端以將其存儲在 mongo 中。 不幸的是，它發送的是文件名，但內容沒有。 我曾嘗試使用 FileReader() 讀取文件的內容，但我無法讓它工作。 關於什么是閱讀文件內容的最佳/最簡單方法的任何想法？

我希望能夠將內容存儲到變量中，而不僅僅是執行 console.log()。 我認為這會使帖子更容易，但歡迎所有建議。 謝謝！

注意：為了縮短這個時間，我只在我認為可以完成邏輯的地方添加了這段代碼，但如果有幫助，我可以添加更多內容。

    @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

您不應該閱讀文件的內容。 您應該將文件作為表單數據附加到 requestbody 中並發送。 如果您仍想閱讀它，可以使用庫將該文件轉換為 json object。 對於直接發送文件參考下面的代碼： -

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