Q:

unable to view image taken from camera using fileURI

i am using angular 4/Ionic4.i need to send image to database using file_URI not data_URL because data URL is encoded in base64 which is taking too much memory.  initially i used base64 which is totally fine and working but my senior told me to do the same with FILE_uri and i am struggling for 2 days to display image and send it to the database.i tried normalizing-URL,domsanitizer,web-view but didn't work.check if upload() code is correct to send image to database

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

A:

1.  Displaying image source from fileURI in ionic
Did you tried webview ? 
if not please try below steps, ionic doesn't display the images with file://.. it should be localhost://.. something. 
so that install webview package and Convert a file:// URL to a URL that is compatible with the local web server in the Web View plugin. 
ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview

usage :
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.  Upload file blob to server
first you have to convert file to blob and then append to the formData. 
Note: keep in mind here this.image is string of the file path its not a exact file. 
upload:
We have to convert image to blob file and then send it to server. 
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);
  }
  );

Convert dataUri to 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;
  }

Please let me know if we face any issues with this code.