vue上传图片出现request Content-Type isn‘t multipart/form-data错误

最新推荐文章于 2026-06-22 16:27:29 发布

原创最新推荐文章于 2026-06-22 16:27:29 发布 · 7.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html

框架和插件同时被 2 个专栏收录

46 篇文章

订阅专栏

Web

34 篇文章

订阅专栏

本文探讨了Content-Type标头在HTTP请求中的作用，特别是在上传文件和Vue应用中的应用场景。当Content-Type设置为`multipart/form-data`时，用于文件上传，而误设为`application/json;charset=UTF-8`可能导致Vue请求失败。问题源于Vue拦截器对请求参数的不当修改，导致实际Content-Type与预期不符。理解并正确设置Content-Type对于确保网络请求的顺利进行至关重要。

Content-Type 标头告诉客户端实际返回的内容的内容类型。
上传文件正确的content-Type是：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryU5hWNP1WkuZkbBiv
报错之后Content-Type是：application/json;charset=UTF-8
Vue中的原因是：在拦截器出对请求参数做了修改，导致请求参数的类型改变，浏览器识别添加Content-Type与真正的参数的类型不一致。

下面是Content-Type的一些资料：
Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。
常见的媒体格式类型如下：

text/html ： HTML格式
text/plain ：纯文本格式
text/xml ： XML格式
image/gif ：gif图片格式
image/jpeg ：jpg图片格式
image/png：png图片格式

以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式
application/xml： XML数据格式
application/atom+xml ：Atom XML聚合格式
application/json： JSON数据格式
application/pdf：pdf格式
application/msword ： Word文档格式
application/octet-stream ： 二进制流数据（如常见的文件下载）
application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式