小程序 POST 请求传递 FormData 格式参数

场景

向服务端发起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、配置请求头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=> {
    
    }
})

代码示例

小程序中 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
  })
}

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)
    })
  })
}