uni-app 项目中如何通过 formData 上传图片文件到传统服务器？

问题描述

最近遇到一个需求，需要 web 客户端在选择图片后，上传到需要对接的第三方平台给定的接口中，接口参数格式固定。翻看了 uni-app 的网络请求接口 uni-request，发现这个 api 不支持类似于下面 formData 格式的数据：

let formData = new FormData()
formData.append('file', file) // file为文件对象

uni.request({
  url: 'http://xxx.com/upload',
  method: 'POST',
  header: {
    'Content-Type': 'multipart/form-data'
  },
  data: formData,
  success: function (res) {
    console.log('上传成功')
  },
  fail: function (err) {
    console.log('上传失败', err)
  }
})

上面的代码执行时是会报错的。

使用 uni-uploadFile

看了一圈，发现只有 uni-uploadFile 这个 api 是支持 formData 的，通过这个 api ，根据文档构建出第三方平台需要的参数，比如设置 headers 中的 token：

uni.chooseImage({
    success: res => {
       console.log(res);
       if (res.tempFiles.length > 0) {
          const files = res.tempFiles[0];
          uni.uploadFile({
            url: `${urlPrefix}/imageUpload`, //第三方图片上传接口
            header: { token:'xxx' },
            filePath: '1', // 这里第三方接口不需要，可以随便填  
            name: 'file',
           formData: { xxx:'xx', files, }, // 构造参数
           success: (res) => {
             console.log(res);
           }
      });
)}

这样就完美解决了问题。