坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
阿新 • • 發佈:2018-11-05
微信小程式中通過元件<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的content-type
為 multipart/form-data。那麼我們怎麼傳表單資料呢:
JSON.stringify(e.detail.value) 就是將json物件轉為字串格式後再傳參,這樣在後臺就可以完美的接受到數值了。
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 } })