angular - ionic 5 angular（电容器相机）和nodejs multer中的多张图像上传

Question

我正在尝试在 ionic Angular 应用程序中上传多个图像，但无法将正确的有效负载发送到 API。从邮递员发送数据运行良好。后端使用 nodejs multer 包处理图片上传。

如何将正确的有效负载从 UI 发送到后端。对于网络，我们可以使用表单数据进行图像上传，但移动端无法找到解决方案

在 HTML 文件中

<ion-button fill="outline" expand="block" color="secondary" (click)="selectImageSource()">
     <ion-icon slot="start" name="camera"></ion-icon>
      Upload
 </ion-button>

TS 文件

async selectImageSource() {
    const buttons = [
      {
        text: 'Choose from gallary',
        icon: 'image',
        handler: () => {
          this.addImage(CameraSource.Photos);
        }
      }
    ];

    const actionSheet = await this.actionSheetController.create({
      header: 'Select image source',
      buttons
    });
    await actionSheet.present();
  }

async addImage(source: CameraSource) {
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Base64,
      source,
      allowEditing: false
    });

    const blobData = this.b64toBlob(image.base64String, `image/${image.format}`);
    const uploadParams = {
      userId: 'Abcd1234',
      uploadType: 'profile-pics'
    };

    this.apiService.uploadPhotos(blobData, uploadParams)
      .subscribe((img: any) => {
        console.log('Image: ', img);
      }, (err) => console.log('Eror: ', err));
  }


    b64toBlob(b64Data, contentType= '', sliceSize= 512) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    const blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }

标签： angularionic-frameworkmulter-s3

Answer 1

对于选择多个图像，您可以使用 <input #file type="file" multiple (change)="onFileSelect()" />它，因为它也适用于设备。

您的 TS 文件看起来像这样，以在您的案例图像中获取一组选定的文件。

@ViewChild('file', { static: false }) public file: ElementRef;

public onFileSelect(): void {
    const fileArray: Array<File> = this.file.nativeElement.files;
}