Как правильно установить новое изображение в следующей ситуации?

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 на самом деле не работает, потому что я не получаю изображение.

Каков правильный способ сделать это?

EDIT:

this.uploadingPanoramas представляет собой массив, какие объекты, содержащие файлы:

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

Answer 1

Как this.uploadingPanoramas[i].file является File типа вы можете использовать FileReader для генерации URL данных с использованием методы readAsDataURL().

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов (или необработанных буферов данных), которые хранятся на компьютере пользователя, используя File или Blob объектов для указания файла или данных для чтения.

var reader = new FileReader(); 
reader.onload = function (e) { 
    img.src = e.target.result; 
} 
reader.readAsDataURL(this.uploadingPanoramas[i].file);