使用wx.request发送multipart/form-data请求的方法
社区里有不少关于wx.request发送multipart/form-data请求的问题,我看了几个,基本都说wx.request不支持,得用wx.uploadFile来“曲线救国”。我花了些时间研究了一下,找到了如下方法,分享出来,希望能帮助到有需要的人。 首先,服务端,我用的是async-busboy来解析multipart/form-data请求,测试代码直接使用它提供的就可以:https://github.com/m4nuC/async-busboy/blob/master/examples/index.js 小程序端: 如果wx.request中仅指定'content-type'为'multipart/form-data',服务端会报"no multipart boundary was found"的错误,就像这个帖子里描述的:https://developers.weixin.qq.com/community/develop/doc/000e64476f8d80fd7b9765d5655c00 尽管指定了content-type为'mutipart/form-data',但是wx.request并不会为我们自动添加boundary,既然如此,我们自己加不就可以了吗?经过测试,确认了这个方法可行,前端示例代码如下: [代码]wx.request({[代码][代码] [代码][代码]url: [代码][代码]'http://localhost:8080/test/multipart-form'[代码][代码],[代码][代码] [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码] [代码][代码]header: {[代码][代码] [代码][代码]'content-type'[代码][代码]: [代码][代码]'multipart/form-data; boundary=XXX'[代码][代码] [代码][代码]},[代码][代码] [代码][代码]data: [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码] [代码][代码]'\r\nContent-Disposition: form-data; name="field1"'[代码] [代码]+[代码][代码] [代码][代码]'\r\n'[代码] [代码]+[代码][代码] [代码][代码]'\r\nvalue1'[代码] [代码]+[代码][代码] [代码][代码]'\r\n--XXX'[代码] [代码]+[代码][代码] [代码][代码]'\r\nContent-Disposition: form-data; name="field2"'[代码] [代码]+[代码][代码] [代码][代码]'\r\n'[代码] [代码]+[代码][代码] [代码][代码]'\r\nvalue2'[代码] [代码]+[代码][代码] [代码][代码]'\r\n--XXX--'[代码][代码] [代码][代码]})[代码]这里,我向服务端传递了两个参数:field1=value1, field2=value2,服务端得到的结果如下: [图片] 如果对multipart/form-data的请求体格式不了解,可以参考这篇文章:https://ec.haxx.se/http-multipart.html wx.request中的data结构看起来有些复杂,有需要的可以封装一下,封装好的API欢迎跟帖分享出来。