使用 FileTransfer 上传图像时遇到问题答案

【问题标题】：Trouble to upload images with FileTransfer使用 FileTransfer 上传图像时遇到问题
【发布时间】：2018-09-28 09:55:56
【问题描述】：

我正在尝试向我的应用程序添加一个功能，该功能允许用户用他的相机或智能手机拍照并将其上传为个人资料图片。

我从另一个效果很好的项目中选择了这个功能，但不是来自我，而是来自我的一位同事（他离开了）。

我不知道为什么，因为我使用了完全相同的功能，但上传的图像看起来像这样：

the corrupt image

它会随机开始损坏文件，一般在第一季度。有一次，它奏效了，但我不知道为什么。

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

}

知道为什么要这样做吗？哦，忘了提：使用 iOS 版本的应用程序，上传图片效果很好，所以我认为问题不在于服务器属性。 iOS 应用使用自己的函数来检索服务器上的图像。

这里是服务器端：

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

};

通过尝试 Salman Ullah 的回答：

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)

这是我从服务器得到的错误。

【问题讨论】：

标签： cordova ionic-framework file-transfer

【解决方案1】：

尝试发送 imageData 而不是 targetPath。

像这样：

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

【讨论】：