小程序 POST 请求传递 FormData 格式参数-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序 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文章来源地址https://www.toymoban.com/news/detail-633024.html


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