Question

我正在尝试从本地磁盘加载JSON文件，并使用其中的数据填充FabricJS画布。我从文件中获取数据时遇到问题。

这就是我现在所拥有的。

app.html

<input type="file" accept=".json" id="fileInput" (change)="loadFile($event)"/>

app.ts

  loadFile(event) {
const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
const files: FileList = target.files;
this.file = files[0];

const reader = new FileReader();
reader.readAsText(this.file, 'utf8');

this.canvas.loadFromJSON(this.file, this.canvas.renderAll.bind(this.canvas), function (o, object) {
  console.log(o, object);
});

关于如何使这项工作的任何想法？

Answer 1

FileReader有一个异步api。

您必须注册onload事件的回调才能获取数据。

 loadFile(event) {
const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
const files: FileList = target.files;
this.file = files[0];

const reader = new FileReader();
reader.readAsText(this.file, 'utf8');
reader.onload = function() {
  this.canvas.loadFromJSON(reader.result, this.canvas.renderAll.bind(this.canvas), function (o, object) {
  console.log(o, object);
});
}

如何在Angular中读取JSON文件？

1 个答案: