使用Angular 6上傳JSON文件

Question

我正在嘗試使用此方法從用戶加載JSON文件：

<input
  style="display: none"
  type="file" (change)="onFileChanged($event)"
  #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>

這是組件ts文件中的代碼：

export class MyFileUploadComponent {
  selectedFile: File

  onFileChanged(event) {
    this.selectedFile = event.target.files[0];
    console.log(this.selectedFile);
    console.log('content: ' + JSON.stringify(this.selectedFile));
  }

  onUpload() {
  // upload code goes here
  }
}

line console.log(this.selectedFile); 確實為我提供了以下文件元數據：

lastModified: 1551625969247
lastModifiedDate: Sun Mar 03 2019 17:12:49 GMT+0200 (Israel Standard Time) {}
name: "manuscripts.json"
size: 6008
type: "application/json"
webkitRelativePath: ""
__proto__: File

但是當我嘗試使用JSON.stringify打印它的內容時，我得到： {} （空文件）。

原因是什么？

謝謝。

Answer 1

但是當我嘗試使用JSON.stringify打印它的內容時，我得到：{}（空文件）。

這不是JSON文件的內容。 這是一個File對象 。 要閱讀JSON的內容，您需要使用FileReader

onFileChanged(event) {
  this.selectedFile = event.target.files[0];
  const fileReader = new FileReader();
  fileReader.readAsText(this.selectedFile, "UTF-8");
  fileReader.onload = () => {
   console.log(JSON.parse(fileReader.result));
  }
  fileReader.onerror = (error) => {
    console.log(error);
  }
}

Answer 2

JSON.Stringify不適用於TS / JS中的File對象。 您應該從File中提取數據，然后對其進行字符串化。 例如，使用https://developer.mozilla.org/en-US/docs/Web/API/FileReader將文件內容提取為字符串或字符串數​​組