uni.uploadFile h5上传文件失败完美解决方案

在小程序开发项目中，用到了uni-app框架，但因为需要兼容h5，其中有图片上传，后台始终不能获取到上传的文件。

网上找了各种办法，发现很多小程序开发采用uni-app框架都遇到了同样的问题：uni.uploadFile h5上传文件后台无法获取，甚至还牵扯到了payload、form data传值方式。

后来，经过创软小程序开发团队不断尝试，发现只要取消header设置即可，不知道为什么，反正这样实现了。

小程序开发的uni-app h5上传文件代码参考如下：

uni.uploadFile({
    url:'http://www.teamsfy.com',     // 后端api接口
    filePath: res.tempFilePaths[0], // uni.chooseImage函数调用后获取的本地文件路劲
    name:'file',     //后端通过'file'获取上传的文件对象
    formData: {
        'billGID': "xxxccc",  
        'token':"dddd"
    },
    success:(res) => {
        console.log(res)
    },
    fail: (err) => {
        console.log('uploadImage fail', err);
        uni.showModal({
            content: err.errMsg,
            showCancel: false
            });
    }
});

当然，如果用到了跨域，需要设置 OPTIONS 请求，因为表单跨域上传文件，会先发送OPTIONS请求验证服务器是否可用。asp.net 跨域，在web.config中配置如下

<system.webServer>
  <httpProtocol> 
    <customHeaders> 
      <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
    </customHeaders> 
  </httpProtocol>
</system.webServer>

uni.canvasToTempFilePath的坑

1、在APP端，uni.canvasToTempFilePath方法需要放在convasContext.draw的回调里面，否则会一直报canvas is empty

2、在H5端，需要convasContext.draw与uni.canvasToTempFilePath同步执行，也就是不能放在回调里
3、在APP端uni.canvasToTempFilePath返回的路径是一个临时的图片路径
4、在H5端，生成的是base64路径