微信小程序(Taro)手撕FormData - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序(Taro)手撕FormData

发表时间:2021-1-11

发布人:葵宇科技

浏览次数:146

小程序里没有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 = http://www.wxapp-union.com/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

相关案例查看更多