Trouble to upload images with FileTransfer

问题

I’m trying to add a function to my application which allow the user to take a picture with his camera or from his smartphone to upload it as a profil picture.

I’ve picked this function from another project which is working great but isn’t from me but one of my colleague (he left).

I don’t know why since I’ve used the exact same function but the image uploaded look like this :

the corrupt image

It will randomly start to corrupt the file, generally in the first quarter. One time, it worked but I can’t figure why.

  takePhoto(value){

const options: CameraOptions = {
  quality: 75,
  destinationType: this.camera.DestinationType.DATA_URL,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  correctOrientation : true,
  allowEdit:true,
  targetWidth: 300,
  targetHeight: 300,
  sourceType : value


}

this.camera.getPicture(options).then((imageData) => {
  // imageData is either a base64 encoded string or a file URI
  // If it's base64:
  let base64Image = 'data:image/jpeg;base64,' + imageData;
  console.log(base64Image)
  //$("#imgProfil").attr("src",base64Image);

  const fileTransfer: FileTransferObject = this.transfer.create();

  this._zone.run(() => {
  this.avatar_path = base64Image;      
  });

var targetPath = base64Image;
  var options = {
      fileKey: "avatar",
      fileName: this.user._id + ".jpg",
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: {
          //Connection: "close"
      }
  };

fileTransfer.upload(targetPath,"http://XX.XXX.XXX.XX:90/add/photoandroid/" + this.user._id, options) .then((data) => {
  this.storage.set('photoProfilData',base64Image);
  this.events.publish('photoProfil');

  }, (err) => {

  })

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

}

Any idea why it is doing this ? Oh, forgot to mention : with the iOS version of the app, uploading images is working great so I don't think the problem comes from the server properties. The iOS app uses its own function to retrieve the image on the server.

And here is server side :

exports.addphotoandroid = function(req, res){
var ObjectID = require('mongodb').ObjectID;
var fstream;
var monid = req.params.id;
req.pipe(req.busboy);



req.busboy.on('file', function (fieldname, file, filename) {
  console.log("Uploading: " + monid + ".jpg");
  //Path where image will be uploaded
  fstream = fs.createWriteStream("/var/sammy/public/upload/photoprofil/" + monid + ".jpg");
  file.pipe(fstream);
  fstream.on('close', function () {
    console.log("Upload Finished of " + monid + ".jpg");
    response = {"succces" : "photo bien uploadée "};
  });
});

};

By trying with Salman Ullah answer :

POST /add/photoandroid/5a1fd1a89a6f09412b6a74d7 500 28.912 ms - 1426 _stream_readable.js:598
dest.end();
    ^
TypeError: Cannot read property 'end' of undefined
at IncomingMessage.onend (_stream_readable.js:598:9)
at Object.onceWrapper (events.js:314:30)
at emitNone (events.js:105:13)
at IncomingMessage.emit (events.js:207:7)
at endReadableNT (_stream_readable.js:1059:12)
at _combinedTickCallback (internal/process/next_tick.js:138:11)
at process._tickCallback (internal/process/next_tick.js:180:9)
events.js:182
  throw er; // Unhandled 'error' event
  ^
Error: read ECONNRESET
at _errnoException (util.js:1041:11)
at Pipe.onread (net.js:606:25)

This is the error I get from the server.

回答1:

Try senging imageData instead of targetPath.

Like this:

fileTransfer.upload(imageData ,"http://XX.XXX.XXX.XX:90/add/photoandroid/" + 
this.user._id, options) .then((data) => {

来源：https://stackoverflow.com/questions/49894931/trouble-to-upload-images-with-filetransfer