uniapp发送formData数据

前几天跟后端联调的时候后端要求我发送一个formData数据，当时还有点蒙，稍微试了一下才想起来如何发送，这里分享下一些坑和如何发送。

一、自己知识储备不足挖的坑

开始我就想使用webApi，new一个formData()发过去；

//创建一个新的formData实例
let form = new FormData();
//给formData添加一些数据，append(name, value[, filename]): 添加一个新的键值对到 FormData 对象中。下面带大家复习一下formData相关的api的特性
form.append(name, value)；
form.delete(name): 从 FormData 对象中删除一个键值对。
form.get(name): 获取 FormData 对象中指定键的值。
form.getAll(name): 获取 FormData 对象中指定键的所有值。
form.has(name): 检查 FormData 对象中是否存在指定的键。
form.set(name, value): 设置 FormData 对象中指定键的值。如果该键已经存在，则会用新的值覆盖旧的值。

事实上，uniapp是不支持webApi的，因为uni-app 是一个使用 Vue.js 开发所有前端应用的框架。你书写上面的代码会提示FromData is not a constructor(并不是一个合理的构造器)。这个跟代码运行环境有关的。

二、解决它！

在这里我们需要给你请求的请求头的Content-Type更改为application/x-www-form-urlencoded或者multipart/form-data就可以了。

header:{
'Content-Type': 'application/x-www-form-urlencoded'
}
//或者
header:{
'Content-Type': 'multipart/form-data'
}
//两者的区别主要是application/x-www-form-urlencoded适合传递简单的表单数据，不含二进制文件图片等
//传递图片等最好使用multipart/form-data

gpt给的解释如下

application/x-www-form-urlencoded和multipart/form-data是两种常见的HTTP请求内容编码类型，它们在处理表单数据时有所不同。

application/x-www-form-urlencoded是一种标准编码格式，它将表单数据编码为键值对的形式。这种编码方式通常用于提交简单表单，其中每个控件与一个键值对相对应，键和值通过等号（=）连接，而多个键值对之间则通过&符号分隔。

multipart/form-data是一种更为复杂的编码方式，它用于提交包含文件上传的表单。在multipart/form-data编码中，表单数据被编码为一条消息，每个控件对应消息的一部分。与application/x-www-form-urlencoded不同，multipart/form-data在发送数据时需要指定一个边界（boundary），用于分隔不同的部分。这种编码方式可以处理复杂表单，包括文件上传、二进制数据传输等。

总结来说，application/x-www-form-urlencoded和multipart/form-data的主要区别在于处理表单数据的方式。前者将表单数据编码为键值对的形式，适用于简单表单的提交；而后者则将表单数据编码为一条消息，适用于包含文件上传的复杂表单的提交。

每天一篇分享工作中遇到小坑，希望大家一起成长。前端未死，只要我们不卑不亢，负重前行。