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

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;