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

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 输入标签发送到 select 一个文件，并使用上面提到的相同 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);

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

Answer 2

这里是将Ionic 4拍摄的图片上传到后台服务器的详细方法。

假设我们有以下class CaptureImage 专用于拍摄和上传拍摄的图像

export class CaptureImage  implements OnInit {
 constructor() { }
  ngOnInit() {
  }
}

首先，我们需要使用 :

安装@ionic-native/camera

ionic cordova plugin add cordova-plugin-camera
npm install @ionic-native/camera

可以参考Ionic Documentation

然后你需要在你的 class 中声明一个相机对象，所以我们的 class 将变成：

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

export class CaptureImage implements OnInit {

  //image to be displayed in template
  image;
  imageData;
  constructor(private camera: Camera) { }
          ngOnInit() {
          }
}

接下来我们需要在模板中使用触发器，以便调用捕获图片的函数，因此模板 (capture-image.page.html) 将如下所示：

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button (click)="capture()">
          <ion-icon ios="ios-camera" md="md-camera"></ion-icon>
      </ion-fab-button>
 </ion-fab>

注意我们定义了一个点击事件调用capture()函数。现在我们需要实现这个功能。

回到我们的 CaptureImage class，这里是 capture() 函数：

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

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

请注意，destinationType 必须是 this.camera.DestinationType.DATA_URL

恭喜！您已拍照，您可以使用以下方式在您的模板中查看已拍照：

<img [src]="image" >

现在我们需要将它上传到服务器。为了简单起见，我直接在classCaptureImage中实现上传功能。但实际上最好在专用服务中实现所有后端调用，然后将其注入您的 class.

因此，为了上传图片，我们将再次需要一个触发器，所以在我们的模板中，让我们定义一个上传按钮：

 <ion-button (click)="upload()" color="success">
    <ion-icon slot="icon-only" name="checkmark"></ion-icon>
 </ion-button>

所以回到 CaptureImage class，让我们首先在构造函数中注入 HttpClient

import { HttpClient } from '@angular/common/http';

export class CaptureImage implements OnInit {
  //image to be displayed in template
  image;
  imageData;
  constructor(private camera: Camera,
          private http: HttpClient){ }
          ngOnInit() {
          }
   }

然后，让我们定义 upload() 函数：

upload(){
  let  url = 'your REST 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，这个函数从 dataURLI:

创建 blob 文件

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;
}

最后，这就是 CaptureImage class 最后的样子：

import { Observable } from 'rxjs';
import { OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

export class CaptureImage implements OnInit {

 //image to be displayed in template
 image;
 imageData;
constructor(private camera: Camera,
        private http: HttpClient) { }
  ngOnInit() {
  }

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

    this.camera.getPicture(options).then((imageData) => {
    this.imageData = imageData;
    this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
    }, (err) => {
       // Handle error
       alert("error "+JSON.stringify(err))
  });
}
  upload(){
    let  url = 'your REST 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

添加到法欧子回答：

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

应该是：

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

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

Capture and upload image to server using Ionic 4

rest

jersey

typescript

angular

ionic4