小程序request 支持content-type为form-data 的两种使用方式

前言

最近做了一个小程序上传文件的需求，在这个需求中，需要联调的接口要求请求头的content-type值需要设置为application/form-data，然而小程序提供的wx.request到目前为止（2020.05.14）暂不支持该设置，也许使用者会说能设置，但是发送请求时依旧会存在问题。。。

因此，就需要去寻找各种解决方法，最终找到了两种处理方式，整理如下；当然，不排除还有其他实现思路。

方式一

其实小程序是有单独为上传文件做了一个定制的api去支持 application/form-data 的请求啦，所以莫慌。

UploadTask wx.uploadFile(Object object)

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。使用前请注意阅读相关说明。

示例使用代码

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

想了解更多，请点详细文档

方式二

当然，我们也可以发现，微信提供的这个uploadFile只是比较使用上传的场景，如果是其他场景，使用起来可能就不是很舒适，所以就该进行一下form-data 的相应封装。封住方法如下：

// 小程序直接设置content-type为''multipart/form-data;'无效，故需要手动封装form-data；XXX为边界值
function formdata (obj = {}) {
  let result = ''
  for (let name of Object.keys(obj)) {
    let value = obj[name];
    result += 
    '\r\n--XXX' +
    '\r\nContent-Disposition: form-data; name=\"'+ name +'\"'+ 
    '\r\n' +
    '\r\n' + value
  }
  return result + '\r\n--XXX--'
}

注意，除了需要对传入的数据（对象）进行格式化为 form-data，之外，还需要设置header 的 content-type 为 'multipart/form-data; boundary=XXX';

参考文章

• 微信开发者文档
• 微信开发讨论相关文章