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

Question

几天来，我一直在 try catch 图像并将其上传到服务器，但没有成功。我的客户端使用 Ionic 4，后端使用 Java(我使用 Jersey 将后端暴露给 REST)。

现在，问题是在拍摄图像并尝试上传后，我的后端一直收到 null。

这是我的客户端代码:

    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

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

假设我们有下面的 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

然后你需要在你的类中声明一个相机对象，这样我们的类就变成了:

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 类，这里是 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" >     

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

所以为了上传图片，我们还需要一个触发器，所以在我们的模板中，让我们定义一个上传按钮:

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

那么回到 CaptureImage 类，我们先在构造函数中注入(inject) 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 类最后的样子:

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