小程式request 支援content-type為form-data 的兩種使用方式

前言

最近做了一個小程式上傳檔案的需求，在這個需求中，需要聯調的接口要求請求頭的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.com/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’;

參考文章

• 微信開發者文檔
• 微信開發讨論相關文章