http不使用Form表单发送文件数据和非文件数据(上传篇)

kidsamong 发布于2019-08-01 15:50 / 1307人阅读

摘要：在最后也要添加一个分界，不一样的是在分界的前后各加了两个表示数据发送完毕。至此上传篇结束了

这里要说一下，本篇我重点说的是上传，至于下载，查看对应的下载篇

在原来，文件的上传是使用form表单去提交，有的时候为了上传文件，还要专门为上传文件写一个form表单上传文件，十分的麻烦，探索宇宙已经很累了，哪有时间浪费啊！！^_^

正式进入主题

先看看怎么从html页面中发送文件，回答是：使用 FormData

FormData使用h5新添加的一个对象，可以用来包装要发送的数据，一个例子


    
        上传文件

如上所述，你就已经发送了

{
    username:123456,
    password:67890,
    picture:文件数据(其实这里是将文件转换为二进制了)
}

我们可以看见使用FormData添加数据非常的简单，特别是解决了在上传文件只能使用form表单的憋屈。
下面我要说说，使用FormData包装好的数据怎么传输的，我想这是非常有必要的，特别是当你在后端解析数据的时候，必须要知道传给后台的数据长什么样

使用FormData后，会将request的Content-Type设置为

“multipart/form-data;boundary=----"+一段随机的字母;

上面的boundary正如字面的意思一样，就是一个分界的意思，分开每一个键值对数据，具体的数据格式为

--boundary(换行)
Content-Disposition:form-data;name=“数据的键”(换行)

(换行)
数据的值(“换行”)

注意每一个boundary的前面要加两个“－”
对于文件的数据格式为:

—boundary(换行)
Content-Disposition:form-data;name=“数据的键”;filename=“文件名”(换行)


Content-Type:*/*(换行)


文件的二进制编码

用我们前面的例子，发送的数据为:

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


123456
--boundary
Content-Disposition:form-data;name="password"


67890
--boundary
Content-Disposition:form-data;name="picture";filename="上传的文件名"


Content-Type:image/jpeg;
对图片进行二进制编码后的数据
--boundary--

上面的boundary是一个变量，可以是一串随机数,不过FormData默认是四个"-"加一串随机数。
在最后也要添加一个分界，不一样的是在分界的前后各加了两个"-",表示数据发送完毕。

至此上传篇结束了

混合云 idc机房托管 form表单文件上传 HTTP文件上传文件上传表单 from表单上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50154.html

http不使用Form表单发送文件数据和非文件数据(下载篇)

摘要：本文主要在后端接收前端给的数据，前端的上传篇，查看对应的上传篇如果你想马上使用，那么你可以去中使用或者可以快速的解决你的问题，这里不使用包，完成下载的功能首先需要知道传过来的数据长什么样子，这个非常重要如果这里有疑问，你可以查看对应的上传篇本文主要在后端接收前端给的FormData数据，前端的上传篇，查看对应的上传篇如果你想马上使用，那么你可以去npm中使用multer或者form...

int64 2019-08-01 15:50 评论0 收藏0
JS基础篇--JS之表单提交时编码类型enctype详解

摘要：格式支持比键值对复杂得多的结构化数据，这一点也很有用。例如下面这段代码最终发送的请求是这种方案，可以方便的提交复杂的结构化数据，特别适合的接口。简介 form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。 ...

ad6623 2019-08-21 17:26 评论0 收藏0
form表单那点事儿(下) 进阶篇

摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。表单操作取值用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

Java_oldboy 2019-08-05 17:49 评论0 收藏0
form表单那点事儿(下) 进阶篇

摘要：在表单提交时，浏览器会自动进行一系列的校验工作，没有通过校验的表单是无法提交到服务器的。而方法提交表单，会在请求中发送表单字段键值对。表单提交事件表单提交到服务器时，会触发事件。上一篇主要温习了一下form表单的属性和表单元素，这一片主要讲解用JavaScript如何操作form。表单操作取值用JavaScript操作表单，免不了会有取值赋值操作，比如有以下表单： ...

jerryloveemily 2019-08-01 15:24 评论0 收藏0
关于前端上传文件全面基础扫盲贴(零)

摘要：表单用于向服务器传输数据。属性对象的属性指定了一个事件句柄函数。标签的属性应当与相关元素的属性相同。详情查阅请狠狠地点击关于对象代表表单中的一个提交按钮在表单提交之前，触发事件句柄，并且一个句柄可以通过返回来取消表单提交。系列文章关于前端上传文件全面基础扫盲贴(零)关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest关于前端上传文件全面基础扫盲贴(二) -...

livem 2019-08-05 17:45 评论0 收藏0