无法使用 fileURI 查看从相机拍摄的图像

Question

我正在使用 Angular 4/Ionic4。我需要使用 file_URI 而不是 data_URL 将图像发送到数据库，因为数据 URL 以 base64 编码，占用太多内存。最初我使用 base64，它完全可以正常工作，但我的前辈告诉我对 FILE_uri 做同样的事情，我挣扎了 2 天来显示图像并将其发送到数据库。我尝试了 normalizing-URL、domsanitizer、web-view 但是没用。检查upload() 代码是否正确将图像发送到数据库

 <img [src]="image"/>

 image:any;
 take(){
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    saveToPhotoAlbum: false

   }

  this.camera.getPicture(options).then((imageData) => {
// this.success = 'getting image is successful';
this.image =imageData;
// this.imageURI = this.webview.convertF(imageData);
  }, (err) => {
 this.err = err;
 });
}

upload(){
  let url="https://staging-api.kofluence.com/influencer/v1/profile";
  let postData=new FormData();
  postData.append('file',this.image);
  let data:Observable<any>=this.http.post(url,postData);
  data.subscribe((result)=>{
    console.log(result);
  }
  );
}

Answer 1

1.在ionic中显示来自fileURI的图像源

你试过 webview 吗？

如果不是，请尝试以下步骤，离子不会显示带有 file://.. 的图像。它应该是 localhost://.. 的东西。

以便安装 webview 包并将 file:// URL 转换为与 Web View 插件中的本地 Web 服务器兼容的 URL。

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

用法：

import { WebView } from '@ionic-native/ionic-webview/ngx';

constructor(private webview: WebView) { }

  this.camera.getPicture(options).then((imageData) => {

this.image =this.webview.convertFileSrc(imageData);

  }, (err) => {
 this.err = err;
 });

2。将文件 blob 上传到服务器

首先您必须将文件转换为 blob，然后附加到 formData。

注意：这里记住 this.image 是文件路径的字符串，它不是一个确切的文件。

上传：

我们必须将图像转换为 blob 文件，然后将其发送到服务器。

upload(){
  let url="https://staging-api.kofluence.com/influencer/v1/profile";

 const blobValue = this.dataURItoBlob(this.image);

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

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

将 dataUri 转换为 blob

 private dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    let byteString = atob(dataURI.split(',')[1]);

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

    // write the bytes of the string to an ArrayBuffer
    let arrayBuffer = new ArrayBuffer(byteString.length);
    let _ia = new Uint8Array(arrayBuffer);
    for (let i = 0; i < byteString.length; i++) {
      _ia[i] = byteString.charCodeAt(i);
    }

    let dataView = new DataView(arrayBuffer);
    let blob = new Blob([dataView], { type: mimeString });
    return blob;
  }

如果我们遇到此代码的任何问题，请告诉我。