невозможно просмотреть изображение, снятое с камеры, с помощью fileURI

Question

Я использую Angular 4 / Ionic4.i мне нужно отправить изображение в базу данных, используя 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.Отображение источника изображения из fileURI в формате ionic

Вы пробовали веб-просмотр?

, если нет, попробуйте выполнить следующие действия, ionic не отображает изображения с файлом: // ..быть localhost: // .. что-то.

, чтобы установить пакет веб-просмотра и преобразовать файл: // URL-адрес в 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);
  }
  );

Преобразование данных в 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;
  }

Пожалуйста, дайте мне знать, если у нас возникнут какие-либо проблемы с этим кодом.