微信小程序使用wx.request發送multipart/form-data請求的方法

前一陣子開發微信小程序功能，需要用到wx.request請求服務器接口，接口需要傳遞form-data參數，但是按官方文檔提供的wx.request請求總是不成功。

找了些資料都說wx.request不支持，得用wx.uploadFile來實現。其實是可以的，只是沒有找到正確的打開方式而已。

經過參考一些資料以及多次試驗，最終解決了這個問題，特意整理一下。整個調試及解決問題的過程如下：

1、確認服務器接口是否正常。

使用postman訪問服務器接口，按要求傳遞參數，結果返回正常，說明服務器接口沒有問題。

2、通過多次調試，最終問題確定在content-type和data范圍內。

網上有些資料說wx.request中content-type無法使用multipart/form-data，但是嘗試了application/json、application/x-www-form-urlencoded等多種方式都不行。

然而在postman中使用multipart/form-data是成功的，所以判定content-type使用multipart/form-data是正確的，問題可能是data數據的格式造成的。

3、嘗試修改data數據格式，問題解決。

首先，將data格式傳遞json對象，結果失敗。

其次，將data格式傳遞json字符串，結果仍然失敗。

最后，參考了網上一個例子，將data格式做如下拼接后問題解決：

wx.request({
    url: "http://接口地址",
    method: 'POST',
    data: '\r\n--XXX' +
        '\r\nContent-Disposition: form-data; name="參數名稱"' +
        '\r\n' +
        '\r\n' + JSON.stringify(postData) +
        '\r\n--XXX',
    header: {
        'content-type': 'multipart/form-data; boundary=XXX'
    },
    success: function(res) {
        //參數值為res.data,直接將返回的數據傳入
        doSuccess(res.data);
    },
    fail: function(res) {
        doFail(res);
    }
})

其中，【接口地址】是服務器接口的地址，【參數名稱】是接口提交需要的參數，postData即為提交的數據，如果是多個參數，可以繼續添加字符串參數部分：

'\r\nContent-Disposition: form-data; name="參數名稱2"' +
'\r\n' +
'\r\n' + JSON.stringify(postData2) +
'\r\n--XXX',

4、參考資料：使用wx.request發送multipart/form-data請求的方法 | 微信開放社區 (qq.com)

5、附一個自己整理的request類：

var app = getApp();
var domain = "配置接口統一域名地址";

/**
 * POST請求，返回數據不做解析
 * URL：接口
 * postData：參數，json類型
 * doSuccess：成功的回調函數
 * doFail：失敗的回調函數
 */
function requestPost(url, postData, doSuccess, doFail) {
  wx.request({
    //項目的真正接口，通過字符串拼接方式實現
    url: domain + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    data: postData,
    method: 'POST',
    success: function (res) {
      //參數值為res.data,直接將返回的數據傳入
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}
/**
 * POST請求，返回數據解析json對象
 * URL：接口
 * postData：參數，json類型
 * doSuccess：成功的回調函數
 * doFail：失敗的回調函數
 */
function requestPost2(url, postData, doSuccess, doFail) {
  wx.request({
    url: domain + url,
    method: 'POST',
    data: '\r\n--XXX' +
      '\r\nContent-Disposition: form-data; name="message"' +
      '\r\n' +
      '\r\n' + JSON.stringify(postData) +
      '\r\n--XXX',
    header: {
      'content-type': 'multipart/form-data; boundary=XXX'
    },
    success: function (res) {
      //參數值為res.data,直接將返回的數據傳入
      // console.log(res);
      var jsonStr = res.data;
      if (typeof jsonStr != 'object' && jsonStr != "empty") {
        jsonStr = jsonStr.replace(/\ufeff/g, ""); //重點
        var jobj = JSON.parse(jsonStr); // 轉對象
        doSuccess(jobj);
      }
      else
        doSuccess(res.data);
    },
    fail: function (res) {
      doFail(res);
    }
  })
}

//GET請求，不需傳參，直接URL調用，
function requestGet(url, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'GET',
    success: function (res) {
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * module.exports用來導出代碼
 * js文件中通過var request = require("../util/request.js")  加載
 * 在引入引入文件的時候"  "里面的內容通過../../../這種類型，小程序的編譯器會自動提示，因為你可能
 * 項目目錄不止一級，不同的js文件對應的工具類的位置不一樣
 */
module.exports.requestPost = requestPost;
module.exports.requestPost2 = requestPost2;
module.exports.requestGet = requestGet;