miniprogram-formdata

小程序form-data polyfill

此库参考formdata-polyfill修改为小程序版本

支持的小程序

• 微信小程序
• 支付宝小程序
• 字节小程序

其他小程序没有进行测试，可以自行测试

需要注意的问题

在浏览器中FormData构造函数可以接收表单元素form作为参数，此polyfill不支持！

usage

1import FormData from 'miniprogram-formdata'
2import Blob from 'miniprogram-blob' // 假设当前小程序不支持Blob，引入polyfill
3
4// 设置为全局对象
5// globalThis.FormData = FormData
6
7const fd = new FormData()
8fd.append('text', 'string')
9fd.append('blob', new Blob(['abc']))

TIP:
支付宝小程序IDE环境下globalThis为undefined，解决方法
字节小程序所有环境的globalThis都为undefined,暂时无法设置全局变量。

API

参考: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/FormData

例子: 在小程序中使用FormData进行HTTP请求

下面使用微信小程序作为例子，其他小程序参照修改即可.

如: 支付宝小程序只需将wx.request替换为my.request，然后reqOpt.header替换为reqOpt.headers即可。

1// app.js
2import FormData from 'miniprogram-formdata'
3import formDataEncode from 'formdata-encode'
4globalThis.FormData = FormData
5
6const rawRequest = wx.request
7function request(reqOpt) {
8  if (Object.prototype.toString.call(reqOpt.data) === '[object FormData]') {
9    const blob = formDataEncode(reqOpt.data) // 将FormData编码为multipart/form-data
10    if (!reqOpt.header) reqOpt.header = {}
11    reqOpt.header['content-type'] = blob.type
12    blob.arrayBuffer().then((buffer) => {
13      reqOpt.data = buffer
14      rawRequest(reqOpt)
15    })
16  }else{
17    rawRequest(reqOpt)
18  }
19}
20Object.defineProperty(wx, 'request', {
21  get() {
22    return request
23  },
24})
25
26
27// other.js
28import File from 'miniprogram-file' // 由于微信小程序没有File，引入polyfill
29
30const fd = new FormData()
31fd.append('string', 'string')
32fd.append('file', new File(['filecontent'], 'filename'))
33
34wx.request({
35  url: 'http://localhost:3333/post',
36  method: 'POST',
37  data: fd,
38  success(res){}
39})