Ionic Android。拍下相机的照片，然后发送到服务器上

Question

我这几天一直在纠结用手机摄像头拍照，用Ionic和Android设备，以帖子请求的方式发送到服务器。我看了很多类似问题的帖子，但没有一个解决方案对我有效。我想说的是，我对离子世界很陌生，所以我还在学习。也许是我看不懂的愚蠢问题。在添加我试过的代码之前，我想先列举一下我目前试过的东西。

• 使用了FILE_URL和DATA_URL来处理数据。目的地类型 选择权
• 手动将图像转换为基数64
• 二手产品 domSanitizer.bypassSecurityTrustUrl(b64img) 在 .html 档案

请看下面我试过的代码。

这是拍摄照片的代码

const options: CameraOptions = { // photo options
    quality: 50,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
} // take picture
this.camera.getPicture(options).then((imageData) => {
        this.imageData = imageData;
        this.image = ( < any > window).Ionic.WebView.convertFileSrc(imageData);
        //extra http://localhost/file.. and I slice it to remove extra chars
        this.image = this.image.slice(27);
    },
    (err) => {
        this.helperService.showAlert(JSON.stringify(err));
    });

这是上传照片到服务器的代码。

upload() { // upload method
    let url = 'url/to/post';
    const date = new Date().valueOf();
    const imageName = date + '.jpeg';
    console.log(this.imageData);
    -- - > undefined
    //slice it to remove extra chars
    this.imageData = this.imageData.slice(27);
    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.httpClient.post(url, postData);
    data.subscribe((result) => {
        this.helperService.showSuccess(result);
    });
}

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

这是我的HTML文件

<ion-content>
    <ion-grid>
        <img [src]="DomSanitizer.bypassSecurityTrustUrl(image)">
    </ion-grid>
    <ion-button (click)="upload()" color="success">
        <ion-icon slot="icon-only" name="checkmark"></ion-icon>
    </ion-button>
</ion-content>

问题：

1. 照片不能显示在屏幕上，而且我的图像是未定义的--我试过使用和不使用DomSanitizer。
2. this.imageData在 上传() 办法

这是我按照的参考帖，但我无法管理看到的问题。捕捉并上传图像到服务器使用Ionic 4。

看了这个参考帖，我连图片前面显示的多余字符都切掉了，但我没能解决这些问题。

如果我应该添加任何其他信息，请告诉我。谢谢您的帮助

Answer 1

我设法在屏幕上显示的图像，通过使用。

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

而不是...

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

不幸的是，this.imageData仍然未定义，我无法找出原因.Update：看起来照片现在被发送到bakend，但它的大小是0，后台（是Nodejs）无法使用它。我应该怎么做？我应该用什么方法来解析吗？谢谢大家