我试图上传多个图像，因此将图像转换为 base64 编码的字符串，并将其元数据存储在一个数组中。我们将图像路径的引用存储到数据库，因此功能性被写入后端以供插入。
然而 ，
- 要将图像文件处理为 base64 并存储元数据，我使用数组并尝试将其作为参数传递给函数，但我在服务调用中收到空数组。有人可以帮我理解为什么以及如何解决这个问题。
- 每次for循环迭代都会调用上传图像，为什么？
提前致谢 。
export class ItemsDetailsComponent {
//image variables
itemImageDetails: any = [];
ItemImageURLs: any = [];
itemImageCount: number = 0;
base64image: any = [];
CustImageData: any;
itemImageData: any;
itemimagePath: any;
fileList: any = [];
newImageMetaData: any = [];
imageMetaData: any = [];
addImagePopupVisible: boolean = false;
deleteImagePopupVisible: boolean = false;
tempImageCount: number = 0;
deleteImageURL: any;
deleteImageName: any;
deleteImageConfirmPopUp: boolean;
value: any[] = [];
constructor() {
// ...
}
processFile() {
let count = 0;
for (let i = 0; i < this.value.length;
(i++, count++)) {
this.fileList.push(this.value[count]);
this.httpDataService.getBase64(this.value[count])
.then(base64img => {
this.base64image[this.tempImageCount] = base64img;
this.base64image[this.tempImageCount] = this.base64image[this.tempImageCount].split(",")[1];
this.tempImageCount++;
this.newImageMetaData.push({
"type": this.fileList[i].type,
"name": this.fileList[i].name,
"size": this.fileList[i].size
});
});
}
//want to call this function only after for loop is complete but is getting called at every iteration , WHY?
this.uploadImages();
}
uploadImages() {
if (this.newImageMetaData.length == this.base64image.length) {
//recieves expected output(the array in log) **
console.log(this.newImageMetaData);
console.log(this.base64image); **
// below service call is receiving empty array - >> [] for ** [...this.base64image] ** ** [...this.newImageMetaData] **
this.httpDataService.uploadMultipleImages(["", this.itemCode, [...this.base64image],
[...this.newImageMetaData]
])
.subscribe(status => {
if ((status != -1) && status) {
this.toastr.success(status + "Image(s) Successfully Uploaded");
this.getImag();
this.getItemImageDetails();
this.newImageMetaData = [];
this.base64image = [];
} else {
this.toastr.error("Error Uploading image" + status + " Image(s) Uploaded ");
}
this.addImagePopupVisible = false;
});
}
}
// <div class="widget-container">
<form enctype="multipart/form-data">
<dx-file-uploader #fileUploader [multiple]="true" accept="image/*" [(value)]="value" uploadMode="useForm"></dx-file-uploader>
<div class="content">
<div *ngIf="value.length > 0">
<h4>Selected Files</h4>
</div>
<div *ngFor="let file of value">
<div class="selected-item">
Name:
<span>{{file.name}}</span><br /> Size:
<span>{{file.size}}</span>bytes<br /> Type:
<span>{{file.type}}</span><br /> Last Modified Date:
<span>{{file.lastModifiedDate}}</span>
</div>
</div>
</div>
<dx-button text="Create Product" type="submit" (onClick)="uploadImages()">
</dx-button>
</form>
</div>
<div class="options">
<div class="caption">Options</div>
<div class="option">
<dx-check-box text="Allow multiple files selection" [(value)]="fileUploader.multiple"></dx-check-box>
</div>
</div>