Ionic2 拍照并上传答案

【问题标题】：Ionic2 Taking a Picture and Uploading itIonic2 拍照并上传
【发布时间】：2018-03-25 18:50:48
【问题描述】：

我正在使用 Ionic 2 进行一个项目，我想上传相机拍摄的图像。但是，我无法让它工作。

我正在使用两个插件：

相机：cordova-plugin-camera (https://github.com/apache/cordova-plugin-camera)
文件传输：cordova-plugin-file-transfer (https://github.com/apache/cordova-plugin-file-transfer)

编辑：我收到错误代码 1，这意味着从文件传输插件中找不到文件

我已经尝试使用this.camera.DestinationType.FILE_URI 和this.fileURL，但它仍然给我文件未找到错误。

我的代码如下。任何建议或意见将不胜感激！

/* Take a picture with camera */
takePicture() {
    this.camera.getPicture({
        destinationType: this.camera.DestinationType.DATA_URL,
        sourceType: this.camera.PictureSourceType.CAMERA,
        mediaType: this.camera.MediaType.PICTURE,
        encodingType: this.camera.EncodingType.JPEG,
        correctOrientation: true
    }).then((imageData) => {
      // imageData is a base64 encoded string
        this.base64Image = "data:image/jpeg;base64," + imageData;
        this.fileURL = imageData;
        this.images.push(this.base64Image);
        this.isPicture = 1;
        this.uploadPictures(this.fileURL);
    }, (err) => {
        console.log(err);
    });
}

/* Upload an image */
var fileTransfer: TransferObject = this.transfer.create();

    let options: FileUploadOptions = {
        fileKey: "images",
        fileName: fileURL.substr(fileURL.lastIndexOf('/') + 1),
        chunkedMode: true,
        mimeType: "image/jpeg",
        httpMethod: "POST",
    };

    this.loading = this.loadingCtrl.create({
        content: 'Uploading...',
    });

    fileTransfer.upload(fileURL, encodeURI(this.API_URL+"api/order/receipt_pic/1491378111.3477"), options).then(data => {
        console.log('uploaded');
    }, err => {
        console.log('upload fail');
        console.log(err.code);
    });
}

【问题讨论】：

“我不能让它工作”..你能更具体一点吗？你有错误吗？
有什么问题？有什么错误吗？
destinationType: this.camera.DestinationType.DATA_URL 你已经设置了这个并且正在检查文件路径。改为destinationType: this.camera.DestinationType.FILE_URL
对不起，伙计们。我忘记提及错误。我已经编辑了内容。
@suraj destinationType 根据文档没有 FILE_URL。

标签： ionic2 cordova-plugins

【解决方案1】：

Data_URL 对应用程序来说可能非常繁重，如果图像是高分辨率的，可能会导致应用程序崩溃。

一个适合我的例子：

拍照：

    var cameraOptions = {
          quality: 100,
          destinationType: Camera.DestinationType.FILE_URI,
          sourceType: Camera.PictureSourceType.CAMERA,
          allowEdit: false,
          encodingType: Camera.EncodingType.JPEG,
          popoverOptions: CameraPopoverOptions,
          saveToPhotoAlbum: false,
          correctOrientation: true
        };

navigator.camera.getPicture(
  function cameraSuccess(imageUri) {
    uploadProfilePicture(imageUri)
    .then(function(data){

    },function(error){
      console.log('failed', error);
    });
}, function cameraError(error) {
  console.log('error', error);

}, cameraOptions);

上传配置文件图片（imageUri）：

  var url = BASE_URL+'/upload-avatar';
  var token = AuthService.getAccessToken(); 
  var options = {
    fileKey : "image", //this is the name of the param the server is expecting
    httpMethod: "POST",
    chunkedMode : true,
    mimeType : "image/jpeg",
    headers : {
      'Accept': 'application/json', //this is important
      'Authorization': token
    }
  };

var ft = new FileTransfer();
  ft.upload(imageUri, encodeURI(url), win, fail, options);
  function win (){
  }
  function fail (){
  }

由于您使用的是 httpMethod: "POST" ，因此您需要将 headers 附加到选项对象。 'Accept': 'application/json' 对我有用，我也发送令牌，因为用户必须经过身份验证才能上传图片。

【讨论】：