Question

我正在开发离子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，没有错误。 WEIRD !!!!，没有登录服务器端，我可以看到请求格式正确。

请帮助我。

UPDATE

我发现下载图像的base64字符串长度远远小于图库中的图像。

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

Answer 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'))
    )

};

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

无法从离子3应用程序上传图像到服务器

1 个答案: