微信小程序(Taro)手撕FormData

小程序裏沒有FormData類，因此POST方法若是要傳multipart/form-data就會報錯。

而npm上的formdata-polyfill，相似 https://github.com/form-data/... 或者https://github.com/jimmywarti...
都很差用

好在有人探究出來 https://developers.weixin.qq.... 能夠手動拼裝出FormData格式的字符串，而且成功調用。

如下附代碼：

// 手動拼接FormData字符串
// 函數邊界處理沒怎麼作，各位可自行補充
// 數組和obj的狀況沒有處理，能夠用postman發個請求看看格式，很簡單的
function createFormData(params = {}, boundary = '') {
  let result = '';
  for (let i in params) {
    result += `\r\n--${boundary}`;
    result += `\r\nContent-Disposition: form-data; name="${i}"`;
    result += '\r\n';
    result += `\r\n${params[i]}`
  }
  // 若是obj不爲空，則最後一行加上boundary
  if (result) {
    result += `\r\n--${boundary}`
  }
  return result
}

// 通用post請求
export const post = function (url, params) {
  return new Promise(function (resolve, reject) {
    // 生成一個boundary字符串
    const boundary = `----FooBar${new Date().getTime()}`;
    const formData = createFormData(params, boundary);
    console.log(formData);
    Taro.request({ // 這裏我用的taro，改爲wx.request也同樣
      url,
      method: 'POST',
      credentials: 'include', //設置傳遞cookies
      dataType: 'json',
      header: {
        'Accept': 'application/json',
        'Content-Type': `multipart/form-data; boundary=${boundary}`,
      },
      data: formData,
      timeout: 5000,
      success: function (res) {
        resolve(res.data);
      },
      fail: function (error) {
        reject(error);
      }
    })
  });
}

formdata格式

用postman發個formdata請求，咱們能夠看到數據長這樣：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="mobile"

13800138000
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name"

張三
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="address"

地球
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="weappid"

abcdefghijklmn
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="id"

107
------WebKitFormBoundary7MA4YWxkTrZu0gW--

仔細觀察如下，就能夠總結出上面的拼裝規則了。
其中，數據體中boundary，是Content-Type中的boundary前面加--。

開頭和結尾還有每一個field之間要加上boundary