无法从 ionic 3 应用程序将图像上传到服务器答案

【问题标题】：Unable to Upload Image to Server from ionic 3 Application无法从 ionic 3 应用程序将图像上传到服务器
【发布时间】：2018-08-17 02:16:17
【问题描述】：

我正在 ionic 3 中开发一个应用程序。我有一个工作流程，您可以使用相机或从图库中选择来上传图片。第一种情况是您选择相机，然后发送将图像直接上传到服务器。第二种情况是从图库中选择，然后选择不同的名称和参数，然后单击上传以上传图像。

两者都使用相同的 base64 图像概念，如下所示

this.uploadPicture = 'data:image/jpeg;base64,' + imageData;

选项的唯一区别是：上传图片：

let options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  sourceType : this.camera.PictureSourceType.PHOTOLIBRARY
};

相机：

options: CameraOptions = {
   quality: 50,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE
};

两者都使用相同的功能来上传图片

Upload(image,latitude,longitude,token) {
    let url = this.appConfig.apiBaseUrl+"deals";
    let requestoptions = this.buildRequest(url,'POST');
    requestoptions.body = {
        'image':image
    };

    let params: URLSearchParams = new URLSearchParams();
    params.set('latitude', latitude);
    params.set('longitude', longitude);
    params.set('token',token);
    requestoptions.params = params;
    return this.http.request(new Request(requestoptions))
      .map(
          (response: Response) => {
            let res: Object = response.json();
            return res;
         }
      ).catch(error => {
          return Observable.throw(error.json());
     });
  }

问题真的很奇怪：

1) 当我直接从相机点击时，它工作正常。

2) 当我上传从互联网保存的图像到设备（例如whatsApp）时，它工作正常。

3) 但是当我从手机相机拍摄的图库中拍摄图像时，请求没有命中 api，没有错误。奇怪！！！！，服务器端没有日志，我可以看到请求的格式正确。

请帮帮我。

更新

我发现下载图片的base64字符串长度比图库图片的要少得多。

有人可以告诉我如何在上传之前从图库中保存图像副本（使用选项）然后将其删除，以便 base64 字符串长度更短，这可能会导致上传循环。

【问题讨论】：

嗯，你用的是什么http？ Angular 5 的 httpclient 还是？

标签： android angular ionic-framework ionic3

【解决方案1】：

我不太熟悉您执行 http 请求的方法，但是对于您执行的相同任务，我使用了 httpclient (Angular 5)。在这种情况下，我使用 formData 发布 blob 类型：

uploadSnippetBlob(blob: Blob, snippetId: string) {
console.log("uploading to Azure blob storage...")
let headers = new HttpHeaders().set('Authorization', this.userData.token);
let formData = new FormData(); 
formData.append("snippet", blob);
return this.http.post(this.apiBaseUrl+`/api/my/snippets/${snippetId}/thumbnail`, formData, { headers })
    .pipe(
        retry(1),
        timeoutWith(7000, Observable.throw(new Error('uploadSnippetThumbnailImage API call timed out'))),
        catchError(this.handleError('uploadSnippetThumbnailImage'))
    )

};

然后在您的组件中订阅此方法并处理响应/错误。

【讨论】：