利用FormData对象上传表单数据

最新推荐文章于 2025-03-10 10:32:05 发布

zztt香芋西米露

最新推荐文章于 2025-03-10 10:32:05 发布

阅读量630

点赞数 1

分类专栏：前端项目中的小tips 文章标签： javascript html vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44428184/article/details/118393315

版权

前端项目中的小tips 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTTP POST请求中Content-Type的两种常见类型：application/x-www-form-urlencoded和multipart/form-data。前者常用于普通表单提交，数据以键值对形式发送；后者在上传文件时使用，请求体被分割成多部分。同时，提到了application/json类型用于传输JSON格式的数据，以及text/plain用于纯文本数据。还展示了Vue.js中使用axios发送FormData的示例，并提及了后台Koa框架处理表单数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做项目中表单数据上传的时候又遇到了坑，此处记录一下。

content-type请求头

表单数据上传一般发送post请求，post请求中有个重要的请求头叫content-type,用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。常用的有以下几种类型：

1.application/x-www-form-urlencoded：

（1）最常见的 POST 提交数据的方式。

（2）原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

（3）所有数据变成键值对的形式 key1=value1&key2=value2（如果请求类型type是GET的话，那么格式化的字符串将直接拼接在url后发送到服务端；如果请求类型是POST, 那么格式化的字符串将放在http body的Form Data中发送。）

content-type: application/x-www-form-urlencoded;charset=utf-8
form-data: key1=val1&key2=val2

2.multipart/form-data：

（1）使用表单上传文件时，必须指定表单的 enctype属性值为 multipart/form-data.

（2）请求体被分割成多部分，每部分都是以 --boundary 分割

POST /test.html HTTP/1.1 
Host: example.org 
Content-Type: multipart/form-data;boundary="boundary" 

--boundary 
Content-Disposition: form-data; name="field1" 

value1 
--boundary 
Content-Disposition: form-data; name="field2"; filename="example.txt" 

value2

3.application/json：用来告诉服务端消息主体是序列化后的 JSON 字符串，JSON 格式支持比键值对复杂得多的结构化数据，适合于传输嵌套层次较深的数据。

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8

{"title":"test","sub":[1,2,3]}

4.text/plain：

（1）数据将以纯文本格式发送。

（2）content-type什么都不设置时，大多数情况下都会被浏览器默认为 text/plain ，传统的ajax请求时候，Content-Type默认为"文本"类型。

FormData对象：

1.可将form表单元素的name与value进行组合，实现表单数据的序列化，以便ajax发送数据。

2.允许上传文件，使用方式见我的上一篇文章表单提交的两种方式

3.它使用的格式与表单将Content-Type类型设置为"multipart/form-data"时使用的格式相同。直白点说当使用FormData对象时请将Content-Type类型设置为"multipart/form-data"。

以下是vue框架实现的利用axios发送FormData包装后的表单数据。注意formdata.append('model', 1)，此处model的值不是数字1，而是字符串‘1’。

<form ref="form1" enctype="multipart/form-data" method="post">
   <input type="text" name="myDir">
   <div>
      <label><input type="radio" value="ch" name="test">中文</label>
      <label><input type="radio" value="en" name="test">英文</label>
   </div>
   <button type="button" @click="submitForm1">OK</button>
</form>


async submitForm1() {
  let formdata = new FormData(this.$refs.form1);
  formdata.append('model', 1);
  let msg = await sendrequest(formdata);      
}

补充：这里我后台用的koa框架，获取表单传来的数据的方法为：

 let myDir = ctx.request.body.myDir;
let isChorEn = ctx.request.body.test;