带有附加数据的 Ionic 2 文件传输答案

【问题标题】：Ionic 2 file transfer with additional data带有附加数据的 Ionic 2 文件传输
【发布时间】：2018-03-12 01:05:27
【问题描述】：

我正在尝试使用 ionic 2 文件传输以及其他参数将文件发送到 api。它是表单数据。这是我将数据发送到 api 端的函数：

 uploadFileRemark(businessId,theFile,content,val){
    const fileTransfer: FileTransferObject = this.transfer.create();
    console.log(theFile);
    var uploadOptions = {
      fileKey: "img_url",
      fileName: "img.png",
      params : {'bid':businessId,"imgurl":theFile,"content":content},      
      headers: {'Authorization':'Bearer ' + val, 'Content-Type': 'application/x-www-form-urlencoded'}
    };

    //console.log(this.api.url+'/api/business/postRemark');
    this.createLoadingSpinner();
    this.presentLoadingSpinner();
    let ft = fileTransfer.upload(theFile,this.api.url+'/api/business/postRemark', uploadOptions)
    .then((data) => {
      this.dismissLoadingSpinner();      
      console.log(data);
      alert("BID"+businessId+" "+JSON.stringify(data));
    }, (err) => { 
      this.dismissLoadingSpinner();
      console.log('OOPS!!! UNSUCCESSFUL');
      alert("BID"+businessId+" "+JSON.stringify(err));

    })
    return ft;
  }

但是如果我通过邮递员发送请求而没有“bid”参数，它会给我相同的响应。我已经检查了变量格式和其他。但是，它仍然不起作用。出了什么问题。

【问题讨论】：

您是否尝试删除标题 Content-Type ？因为您要发送多部分表单数据，所以标题 Content-Type 不应该是 'application/x-www-form-urlencoded'
我做到了。出于沮丧，我使用了这个'application/x-www-form-urlencoded' .. :)。不知道发生了什么.. :(
您遇到的错误是什么？
我不知道你是如何在后端处理这个请求的，但是这段代码看起来很好，除了内容类型的标头，它是否从 post man 工作？
后端没有问题。无论我以哪种格式从前端发送参数，它都会到达后端并给出一个响应，如果我没有在邮递员中填写表单字段（出价），我将得到响应。 :(

标签： angular ionic2 ionic3

【解决方案1】：

您需要更改文件传输上传选项：

var uploadOptions = {
      fileKey: "file", // change fileKey
      chunkedMode: false, // add chunkedMode
      mimeType: "multipart/form-data", // add mimeType
      fileName: "img.png",
      params : {'bid':businessId,"imgurl":theFile,"content":content},      
      headers: {'Authorization':'Bearer ' + val, 'Content-Type': 'application/x-www-form-urlencoded'}
    };

【讨论】：

之前尝试过。没用。我认为这是插件的问题。