坑:微信小程序wx.request和wx.uploadFile中传参数的区别
发布时间:2021-10-03 09:13:45作者:顺晟科技点击:
微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据。一般提交表单我们都是通过wx.request请求,提交表单数据,通过参数data传数据,
wx.request({ url: \'test.php\', //仅为示例,并非真实的接口地址 data: { x: e.detail.value }, header: { \'content-type\': \'application/json\' // 默认值 }, success (res) { console.log(res.data) } }) }, formReset: function() { console.log(\'form发生了reset事件\') } })
这样做我们可以在通过接口在后台顺利接收到参数。
但是还有一种,表单里面涉及到上传图片的情况(ps:微信中图片的上传一次只能上传一张),我们通过wx.uploadFile上传图片,参数filePath是通过wx.chooseImage得到的图片临时路径,这时我们可以通过参数formData来传输表单里的内容,但是如果我们如果还是直接通过e.detail.value得到表单数据直接上传的话,后台能接受到这个参数,但是得不到具体数据,后台接收到的形式是[object object] 这是why?很明显就是因为传输的格式不对,注意:wx.request的content-type
默认为 application/json而wx.uploadFile的
JSON.stringify(e.detail.value) 就是将json对象转为字符串格式后再传参,这样在后台就可以完美的接受到数值了。content-type
为 multipart/form-data。那么我们怎么传表单数据呢:
wx.uploadFile({ url: \'https://example.weixin.qq.com/upload\', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: \'file\', formData: { x: JSON.stringify(e.detail.value) }, success (res){ const data = res.data //do something } })
- 上一篇 : 微信小程序处理后端返回图片二进制流,渲染页面
- 下一篇 : 关于微信小程序获取小程序码并接受buffer流保存为图片