Question

我实际上在使用angular5

的离子v3中使用移动应用程序

目标是能够拍摄照片或从现有照片中选择，然后将其上传到服务器。第一部分已经完成，但我正在努力上传。

api需要multipart / form-data，必须包含两个请求。首先是文字部分，第二部分是图像。

有没有解决方案？

Answer 1

这就是我为类似要求所做的工作

takePhoto() {
    this.camera.getPicture({
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: this.camera.PictureSourceType.CAMERA,
      encodingType: this.camera.EncodingType.PNG,
      saveToPhotoAlbum: true
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(imageData);
    }, error => {
      this.functions.showAlert("Error", JSON.stringify(error));
    });
  }

  selectPhoto(): void {
    this.camera.getPicture({
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.FILE_URI,
      quality: 100,
      encodingType: this.camera.EncodingType.PNG,
    }).then(imageData => {
      this.myPhoto = imageData;
      this.uploadPhoto(imageData);
    }, error => {
      this.functions.showAlert("Error", JSON.stringify(error));
    });
  }
  private uploadPhoto(imageFileUri: any): void {
    this.file.resolveLocalFilesystemUrl(imageFileUri)
      .then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
      .catch(err => console.log(err));

  }
  private readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], { type: file.type });
      formData.append('evaluationID', this.currentEvaluation.evaluationId);
      formData.append('standardID', this.currentEvaluation.id);
      formData.append('score', this.currentEvaluation.score);
      formData.append('comment', this.currentEvaluation.comment);
      formData.append('file', imgBlob, file.name);
      this.saveStandard(formData);
    };
    reader.readAsArrayBuffer(file);
  }

这是提供商的代码

saveStandard(receivedStandardInfo:any){
    return new Promise((resolve, reject) => {
      this.http.post(apiSaveStandard,receivedStandardInfo)
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          console.log(err);
          reject(err);
        });
    }).catch(error => { console.log('caught', error.message); });
  }

Ionic 3 File-Transport multipart / form-data

1 个答案: