如何获取文件 reader 的结果

Question

所以我的 html 中有一个 onchange 事件，它从用户那里获取图像并需要将其转换为数据 url 以便发送 socket.io 并存储在数据库中。如何获取文件 reader 对象的结果。不知道怎么传回调

我需要做的是在文件 reader onload 事件中获取一个回调函数，这样我就可以将我的图片变量设置为数据 url，然后通过套接字发送。只需要帮助从文件 reader 获取结果到我的全局变量 // HTML

<input type = 'file' (change) = "setpreview($event)" value = 'upload photo'>

//js代码。

setpreview(event) {
  var img = <File>event.target.files[0];
  var reader = new FileReader();
  reader.onload = function() {
    console.log(reader.result);
  }

  reader.readAsDataURL(img);
}

Answer 1

你明白了，只需将结果分配给范围变量并在模板中使用它

srcImg = null; //declare this

setpreview(event) {
  const comp = this;
  const img = <File>event.target.files[0];
  const promise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function () {
      resolve(reader.result);
    }
    reader.readAsDataURL(img);
  });

  promise.then(img => {
    comp.srcImg = img;
    // if you want to do anything with img you can do it here
  });
}

<input type = 'file' (change) = "setpreview($event)" value = 'upload photo'>
<img [src]="srcImg" *ngIf="srcImg" />

已更新 Stackblitz：https://stackblitz.com/edit/angular-tkbbdh

如何获取文件 reader 的结果

How to get results of File reader

javascript

file

reader

angular