关于微信小程序:微信小程序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