Angular：类型 ArrayBuffer 不可分配给类型字符串

Question

我正在尝试在将所选图像上传到服务器之前显示它的预览..

html

<div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)">
            <p>drag one or more files to this dropzone</p>
            <img src="" id="imgPreview">
</div>

ts

dropHandler(ev){

    console.log(ev);
    console.log("file dropped");
    event.preventDefault();
    if (ev.files && ev.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        var abc=<HTMLImageElement>document.getElementById('imgPreview');
        abc.src=e.target.result;
      };

      reader.readAsDataURL(ev.files[0]);
  }

但abc.src=e.target.result 似乎返回了一个 ArrayBuffer。如何使用 FileReader 将所选图像的 url 作为字符串获取？

Answer 1

我认为你的原则是正确的。当我通过文件上传运行更简单的代码版本时，它可以工作。

https://stackblitz.com/edit/angular-fxa49p

<input type="file" #file (change)="onUpload(file.files[0])" />
<img *ngIf="src" [attr.src]="src" id="imgPreview">

  onUpload(file): void {
    if (!file) {
      return;      
    }

    const reader = new FileReader();
    reader.onload = e => {     
      this.src = <string>e.target.result;
    };
    reader.readAsDataURL(file);
  }

我不得不将 e.target.result 转换为一个字符串以保持 linter 的快乐，但 javascript 很好。

注意，在 Stackblitz 中，drop 功能对我不起作用，因此文件上传。原则上它应该与文件删除相同，因为您最终处理的是File 对象。