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中不适用于我，因此无法上传文件。尽管最终要处理File对象，但原则上应该与文件删除相同。

角度：类型ArrayBuffer不能分配给类型字符串

1 个答案: