Question

我已经尝试捕获图像并将其上传到服务器数天了，但是没有运气。我将Ionic 4用于客户端，并将Java作为后端（我使用Jersey将后端暴露给REST）。

现在，问题在于拍摄完图像并尝试上传后，我一直在后端接收到空值。

这是我的客户端代码：

    openCam(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      cameraDirection: 1
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     //alert(imageData)
     this.imageData = imageData;
     this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
     this.isImageCaptureed = true;

    }, (err) => {
     // Handle error
     alert("error "+JSON.stringify(err))
    });
  }


    upload(){
      let  url = 'http://mydommain/api/upload';
      let dataURL  = 'data:image/jpeg;base64,' + this.imageData;
      let  postData = new FormData();
      postData.append('file', dataURL);

      let data:Observable<any> = this.http.post(url,postData);
      data.subscribe((result) => {
        console.log(result);
      });
  }

我试图将imageData直接传递给FormData对象，我还尝试使用DataURIToBlob()函数将其转换，因为我发现了其他一些类似的问题，但还是没有运气。 >

    dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

我知道问题仅在于imageData格式。由于我设法使用HTML输入标签发送选择文件，然后使用上述相同的upload()函数和后端API上传文件。

Answer 1

在分配给FormData对象之前尝试转换为Blob数据。

const formData = new FormData();
const imgBlob = new Blob([reader.result], {
   type: file.type
});
formData.append('file', imgBlob, file.name);

参考链接：https://devdactic.com/ionic-4-image-upload-storage/

Answer 2

这就是我设法解决此问题的方法：

该问题主要与： destinationType：this.camera.DestinationType.FILE_URI，

必须将其更改为destinationType： this.camera.DestinationType.DATA_URL，

这是工作代码：

 constructor(private camera: Camera,
          private http: HttpClient) { }


  image:any=''
  isImageCaptureed = false;
  imageData;
  data;
  dataURL;

  openCam(){
   const options: CameraOptions = {
   quality: 100,
   destinationType: this.camera.DestinationType.DATA_URL,
   encodingType: this.camera.EncodingType.JPEG,
   mediaType: this.camera.MediaType.PICTURE,
   correctOrientation: true
   }

   this.camera.getPicture(options).then((imageData) => {
   this.imageData = imageData;
   this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
   this.isImageCaptureed = true;
  }, (err) => {
  // Handle error
    alert("error "+JSON.stringify(err))
  });
}

upload(){
let  url = 'your API url';
const date = new Date().valueOf();

// Replace extension according to your media type
const imageName = date+ '.jpeg';
// call method that creates a blob from dataUri
const imageBlob = this.dataURItoBlob(this.imageData);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' })

let  postData = new FormData();
postData.append('file', imageFile);

let data:Observable<any> = this.http.post(url,postData);
data.subscribe((result) => {
  console.log(result);
});
}


dataURItoBlob(dataURI) {
  const byteString = window.atob(dataURI);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const int8Array = new Uint8Array(arrayBuffer);
  for (let i = 0; i < byteString.length; i++) {
    int8Array[i] = byteString.charCodeAt(i);
  }
  const blob = new Blob([int8Array], { type: 'image/jpeg' });    
  return blob;
}

Answer 3

添加到 Faouzi 答案：

this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);`

应该是：

this.image=(<any>window).Ionic.WebView.convertFileSrc('data:image/jpeg;base64,' + imageData);

使用Ionic 4将图像捕获并上传到服务器

3 个答案: