0

我试图上传多个图像，因此将图像转换为 base64 编码的字符串，并将其元数据存储在一个数组中。我们将图像路径的引用存储到数据库，因此功能性被写入后端以供插入。

然而 ，

  1. 要将图像文件处理为 base64 并存储元数据，我使用数组并尝试将其作为参数传递给函数，但我在服务调用中收到空数组。有人可以帮我理解为什么以及如何解决这个问题。
  2. 每次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>

4

1 回答 1

0

  • 假设 dx-button 是一个 Call To Action，尝试从表单标签中删除 action="uploadImages()"，最终，一旦 processFile() 完成迭代，它将被调用。

  • 如果您在表单中保留操作以及提交按钮，则将执行按钮单击。

或者

  • 从按钮中删除 onClick 并在表单标签中用 processFile() 替换 uploadImages()。
于 2020-11-18T11:41:34.423 回答