小程序裏沒有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