Javascript 角度：类型ArrayBuffer不可分配给类型string

我正在尝试在将选定图像上载到服务器之前显示其预览

html

将一个或多个文件拖动到此dropzone

ts

dropHandler（ev）{
控制台日志（ev）；
log（“文件已删除”）；
event.preventDefault（）；
if（ev.files&&ev.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var abc=document.getElementById（'imgPreview'）；
abc.src=e.target.result；
};
reader.readAsDataURL（ev.files[0]）；
}

---

但是

abc.src=e.target.result

似乎返回了一个ArrayBuffer。如何使用FileReader将所选图像的url获取为字符串？

我认为您的原则是正确的。当我运行一个简单版本的代码并上传文件时，它就会起作用

onUpload（文件）：无效{
如果（！文件）{
返回；
}
const reader=new FileReader（）；
reader.onload=e=>{
this.src=e.target.result；
};
reader.readAsDataURL（文件）；
}

我不得不将

e.target.result

转换成一个字符串，以使linter满意，但是javascript很好

---

注意：在Stackblitz中，删除功能对我不起作用，因此文件上载。虽然您最终处理的是

文件
对象，但原则上应该与文件删除相同。
我认为是由于浏览器限制。您无法获取URL。您只能获取数据。否则，如果您使用图像，您将获得假URL。@xdeepakv假URL是fine..我只想显示previewUse string concat：在这里检查代码，你肯定有一个字符串。一定有一些东西你没有复制。注意，在这种情况下，甚至不要使用文件读取器。创建一个blobURI
dropHandler（ev）{if（ev.files&&ev.files[0]）{document getElementById（'imgPreview'））.src=URL.createObjectURL（ev.files[0]）；}
实际上，当使用拖放时，会对服务器进行Http调用，而不是使用来自浏览器的假路径。简单的文件上载可以正常工作。什么Http服务器？这都是客户端。您可以使用MDN文档中的代码从拖放事件中获取文件对象。当我使用拖放图像时，src会更改为，而不是假路径，简单图像上传，工作正常。reader.readAsDataURL（文件）不返回http URL-它返回base64数据URL。您应该将此数据URL直接绑定到img src
，其中
imgData
（或任何您称之为它的名称）是base64 URL
<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>

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]);
  }

<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);
  }