1. 程式人生 > >坑:微信小程式wx.request和wx.uploadFile中傳引數的區別

坑:微信小程式wx.request和wx.uploadFile中傳引數的區別

微信小程式中通過元件<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 } })