我試圖通過將它們存盤在一個陣列中來上傳多個影像。每個影像都存盤為一個檔案物件，如下所示：
我想將我的影像作為檔案物件發送，而不是作為 base64。但是，當我嘗試預覽影像時，只有最后選擇的影像重復顯示（下面的螢屏截圖）：
我希望預覽所有選定的影像，而不僅僅是一張影像 4 次。
作業堆疊閃電戰！
這是我的代碼：
onSelectFile(event) {
this.file = event.target.files && event.target.files.length
if (this.file > 0 && this.file < 5) {
let i: number = 0;
for (const singlefile of event.target.files) {
var reader = new FileReader();
reader.readAsDataURL(singlefile);
this.urls.push(singlefile);
this.cf.detectChanges()
i ;
console.log(this.urls)
reader.onload = (eventFile: any) => {
this.url = eventFile.target.result;
this.cf.detectChanges()
}
//console.log(singlefile)
};
}
else {
this.toast.error('No More than 4 images', 'Upload Images')
}
}
我的 HTML：
<div class="preview-media" data-max-image="4" style="margin-top: -20px; width: auto;
height:auto; display: flex; flex-wrap: wrap; object-fit: cover;">
<ng-container *ngFor="let singlefile of urls">
<img [src]="url" style="flex-grow: 1; flex-direction: row; flex-wrap: wrap;
width: 50%; height: auto; object-fit: cover;">
</ng-container>
</div>
任何幫助是極大的贊賞。謝謝。
uj5u.com熱心網友回復：
根據MikeOne的回復，我創建了一個單獨的陣列并將影像推送到該陣列中。然后我在我的 html 中呼叫了新陣列并且它起作用了。謝謝你MikeOne
解決方案： 更新 StackBlitz！
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/352725.html
標籤：javascript html 有角的 文件
下一篇：如何將文本檔案讀入二維陣列？