uniapp发送formData数据

1,049 阅读2分钟

前几天跟后端联调的时候后端要求我发送一个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的。你书写上面的代码会提示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的主要区别在于处理表单数据的方式。前者将表单数据编码为键值对的形式,适用于简单表单的提交;而后者则将表单数据编码为一条消息,适用于包含文件上传的复杂表单的提交。