小程序 POST 请求传递 FormData 格式参数_微信小程序 formdata is not defined

场景

向服务端发起POST请求时，有些接口的参数需要以 FormData 形式传递。

小程序中没有FormData对象，使用 let formdata = new FormData() 创建对象，会报错 FormData is not defined

let formdata = new FormData()
formdata.append('a', 1)
formdata.append('b', 2)

// ReferenceError: FormData is not defined
1
2
3
4
5

解决方案

1、配置请求头header： ‘content-type’: ‘application/x-www-form-urlencoded; charset=UTF-8’
2、参数修改为 字符串拼接形式：a=1&b=2

uni.request({
  url: '接口地址',
  method: 'POST',
  data: `a=1&b=2`,
  header: {
    'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  success: res => {
    // do something
  },
  fail: err=> {}
})
1
2
3
4
5
6
7
8
9
10
11
12

代码示例

小程序中 request 请求一般都会进行全局封装，如果直接在封装函数中设置 header 会影响其他接口的调用

可以在需要使用 FormData 形式传参的api中设置 header，通过参数进行传递

api.js

import { request } from '@/utils/request.js'

export function test(data) {
  return request({
    header: {
      'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    url: '接口地址',
    method: 'post',
    data
  })
}
1
2
3
4
5
6
7
8
9
10
11
12

request.js

export const request = options => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: `${process.env.config.requestURL}${options.url}`,
      method: options.method || 'GET',
      data: options.data || {},
      timeout: 60000,
      header: {
        ...options.header
      },
      success: res => resolve(res),
      fail: err => reject(err)
    })
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17