Question

我正在使用angular 4 / Ionic4。我需要使用file_URI而不是data_URL将图像发送到数据库，因为数据URL是用base64编码的，这占用了太多内存。最初我使用base64完全可以正常工作，但是我的上级告诉我对FILE_uri进行同样的操作，我努力工作了2天才能显示图像并将其发送到数据库。我尝试了normalizing-URL，domsanitizer，web-view，但是无效。请检查upload（）代码是否正确，以将图像发送到数据库

<script src="https://cdn.jsdelivr.net/npm/blinq"></script>

 <img [src]="image"/>

Answer 1

1。以离子方式显示来自fileURI的图像源

您尝试过webview吗？

如果不行，请尝试以下步骤，ionic不会显示文件为：//的图像。它应该是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。

注意：请记住此处。图像是文件路径的字符串，不是确切的文件。

上传：

我们必须将图像转换为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;
  }

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

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

1 个答案: