miniprogram-formdata

小程序form-data polyfill

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

支持的小程序

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

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

需要注意的问题

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

usage

import FormData from 'miniprogram-formdata'
import Blob from 'miniprogram-blob' // 假设当前小程序不支持Blob，引入polyfill

// 设置为全局对象
// globalThis.FormData = FormData

const fd = new FormData()
fd.append('text', 'string')
fd.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即可。

// app.js
import FormData from 'miniprogram-formdata'
import formDataEncode from 'formdata-encode'
globalThis.FormData = FormData

const rawRequest = wx.request
function request(reqOpt) {
  if (Object.prototype.toString.call(reqOpt.data) === '[object FormData]') {
    const blob = formDataEncode(reqOpt.data) // 将FormData编码为multipart/form-data
    if (!reqOpt.header) reqOpt.header = {}
    reqOpt.header['content-type'] = blob.type
    blob.arrayBuffer().then((buffer) => {
      reqOpt.data = buffer
      rawRequest(reqOpt)
    })
  }else{
    rawRequest(reqOpt)
  }
}
Object.defineProperty(wx, 'request', {
  get() {
    return request
  },
})


// other.js
import File from 'miniprogram-file' // 由于微信小程序没有File，引入polyfill

const fd = new FormData()
fd.append('string', 'string')
fd.append('file', new File(['filecontent'], 'filename'))

wx.request({
  url: 'http://localhost:3333/post',
  method: 'POST',
  data: fd,
  success(res){}
})