前言
最近做了一个小程序上传文件的需求,在这个需求中,需要联调的接口要求请求头的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/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’;
参考文章
- 微信开发者文档
- 微信开发讨论相关文章
更多推荐
小程序request 支持content-type为form-data 的两种使用方式
发布评论