2

试图使用axios通过POST上传文件,后端一直拿不到参数,研究了下发现axios不直接支持multipart/form-data类型,后改用request模块实现。

本文同步发表在我的个人博客POST请求中的multipart/form-data

个人博客的评论系统加了邮件通知,有什么想和作者说的建议在个人博客留言哦

后续若有变化,将只在个人博客更新,恕此处不再修改
<!-- more -->

Content-Type是什么?

Content-Type 实体头部用于指示资源的MIME类型 media type 。

在响应中,Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找,并不一定遵循此标题的值; 为了防止这种行为,可以将标题 X-Content-Type-Options 设置为 nosniff。

Content-Type的句法示例:

Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

media-type

资源或数据的 MIME type 。

charset

字符编码标准。

boundary

对于多部分实体,boundary 是必需的,其包括来自一组字符的1到70个字符,已知通过电子邮件网关是非常健壮的,而不是以空白结尾。它用于封装消息的多个部分的边界。
例子

为什么上传文件时要设置为multipart/form-data?

我们知道上传文件的时候media-type要设置为 multipart/form-data ,这是为什么呢?为什么不已有使用application/x-www-form-urlencoded呢?

因为此类型不适合用于传输大型二进制数据或者包含非ASCII字符的数据。平常我们使用这个类型都是把表单数据使用url编码后传送给后端,二进制文件当然没办法一起编码进去了。所以multipart/form-data就诞生了,专门用于有效的传输文件

npm的Form-Data包

首先我们来看它的介绍:

A library to create readable "multipart/form-data" streams. Can be used to submit forms and file uploads to other web applications.

The API of this library is inspired by the XMLHttpRequest-2 FormData Interface.

大意是会将可读的数据格式化成 multipart/form-data 流数据,用来提交表单或上传文件。开头提到的request模块也是用它来解决的数据格式问题,我们在request文档中找到如下描述:

For multipart/form-data we use the form-data library by @felixge. For the most cases, you can pass your upload form data via the formData option.

总结

Content-Type用来指定资源类型,multipart/form-data专用有效的传输文件,一些请求库例如request内部支持这种格式,而一些请求库例如axios是不支持的。一个npm模块Form-Data可以用来把数据(比如字符串、buffer、文件流)等转换成此格式。

request已经停止维护了,作者解释是因为历史包袱比较重,建议尽量选择一些更新的http请求模块吧。

参考文献:


LLLsf
30 声望0 粉丝

人活着总要有点念想