用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-5-18 00:22

最近做了一个小程序上传文件的需求,在这个需求中,需要联调的接口要求请求头的content-type值需要设置为application/form-data,然而小程序提供的wx.request到目前为止(2020.05.14)暂不支持该设置,也许使用者会 ...

最近做了一个小程序上传文件的需求,在这个需求中,需要联调的接口要求请求头的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';

参考文章

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: DDong 来自: 掘金