web-dev-qa-db-ja.com

Angular 6を使用してJSONファイルをアップロードします

この方法を使用して、ユーザーから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
  }
}
_

行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_を使用してコンテンツを印刷しようとすると、_{}_（空のファイル）が表示されます。

原因は何ですか？

ありがとう。

javascripthtmljsonangulartypescript
5
Philip L

JSON.Stringifyは、TS/JSのFileオブジェクトに対しては機能しません。ファイルからデータを抽出し、それを文字列化する必要があります。たとえば、 https://developer.mozilla.org/en-US/docs/Web/API/FileReader を使用して、ファイルコンテンツを文字列または文字列の配列として抽出します。

0
Daniel Prosianikov