如何在以下情况下正确设置新图像？

Question

我正在尝试阅读点击Browser按钮后获得的文件的宽度和高度：

for (let i = 0; i < this.uploadingPanoramas.length; i++) {
  const img = new Image() // eslint-disable-line
  console.log('file', this.uploadingPanoramas[i].file)
  img.src = this.uploadingPanoramas[i].file
  console.log('img', img)
  img.onload(() => {
    console.log('width', img.width)
  })
}

console.log('file')日志：

console.log('file')日志：<img src="[object File]">

所以img.onload实际上并不起作用，因为我显然没有得到图像。

这样做的正确方法是什么？

修改

this.uploadingPanoramas是一个包含文件的对象数组：

[{
   file: File,
   progress: 0
 }, {
   file: File,
   progress: 0
}]

Answer 1

由于<div [ngSwitch]="thing.name"> <template [ngSwitchCase]="foo"> <div>FOOOOOO</div> </template> <template [ngSwitchCase]="bar"> <div>BARRRR</div> </template> <template [ngSwitchCase]="cat"> <div>CAT</div> </template>¯ <template [ngSwitchCase]="dog"> <div>DOG</div> </template> </div> 是File类型，您可以使用FileReader使用this.uploadingPanoramas[i].file方法生成数据网址。

  

readAsDataURL()对象允许Web应用程序使用FileReader或File对象异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容要读取的文件或数据。

Blob