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 中对我不起作用，因此文件上传。原则上，它应该与文件删除相同，因为您最终要处理的是File对象。