news 2026/8/27 18:20:43

Vue3上传文件自动处理Content-Type

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Vue3上传文件自动处理Content-Type
vue3中,以下代码: /** * 上传作业指导书文件,实现上传文件到数据库 image 字段或本地磁盘中,使用 post 发送请求,发送的数据只有:请求体数据(表单数据 formData) * @param formData 表单数据,包含的数据有:文件数据(uploadFile)和 文件编号(fileNo) {@link FormData} * @returns */ export const workInstructionUploadFileService = (formData: FormData) => { return request.post("/resources/workInstruction/uploadFile", formData, { // 上传文件,需设置 headers 信息,将"Content-Type"设置为"multipart/form-data" headers: { "Content-Type": "multipart/form-data" } }); }; 需不需要设置"Content-Type": "multipart/form-data"?

不需要手动设置"Content-Type": "multipart/form-data"

原因如下:

1. 浏览器会自动设置

当使用FormData对象发送请求时,浏览器会自动设置正确的Content-Type,并包含必要的 boundary(边界分隔符)。手动设置可能会破坏这个机制。

2. 会丢失 boundary 信息

如果你手动设置了"Content-Type": "multipart/form-data",但没有包含 boundary,请求会失败。正确的格式应该是:

text

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

3. 推荐的正确写法

typescript

export const workInstructionUploadFileService = (formData: FormData) => { return request.post("/resources/workInstruction/uploadFile", formData); // 不需要手动设置 headers,axios 会自动处理 };

4. 验证方式

你可以在浏览器开发者工具的 Network 标签页查看实际的请求头,会发现:

  • 手动设置时:Content-Type: multipart/form-data

  • 自动设置时:Content-Type: multipart/form-data; boundary=...

5. 特殊情况

只有在以下情况下需要手动设置:

  • 使用的请求库不支持自动设置

  • 需要自定义 boundary(极少情况)

  • 需要在 header 中添加其他特定信息

对于你使用的axios或类似的现代 HTTP 库,它们都会自动正确处理FormData的 Content-Type。

建议修改:

typescript

/** * 上传作业指导书文件 * @param formData 包含 uploadFile 和 fileNo 的表单数据 * @returns */ export const workInstructionUploadFileService = (formData: FormData) => { return request.post("/resources/workInstruction/uploadFile", formData); // axios 会自动设置正确的 Content-Type 和 boundary };

这样代码更简洁,也更符合最佳实践。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/28 1:23:43

终极解决方案:微信网页版快速上手指南

终极解决方案:微信网页版快速上手指南 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为微信网页版无法正常使用而烦恼吗?…

作者头像 李华
网站建设 2026/8/28 5:08:52

N_m3u8DL-CLI-SimpleG终极自动化视频下载手册

N_m3u8DL-CLI-SimpleG终极自动化视频下载手册 【免费下载链接】N_m3u8DL-CLI-SimpleG N_m3u8DL-CLIs simple GUI 项目地址: https://gitcode.com/gh_mirrors/nm3/N_m3u8DL-CLI-SimpleG 告别繁琐配置,拥抱智能下载!这款基于N_m3u8DL-CLI核心引擎的…

作者头像 李华
网站建设 2026/8/27 0:20:14

靠谱的航天级SSD固态硬盘哪个好

靠谱的航天级SSD固态硬盘哪个好在当今航天等高端领域,数据存储的可靠性和安全性至关重要,航天级SSD固态硬盘的选择成为关键。那么,靠谱的航天级SSD固态硬盘哪个好呢?湖南天硕创新科技有限公司(TOPSSD)的产品…

作者头像 李华
网站建设 2026/8/26 21:55:13

基于Java Swing的拼图小游戏(2)

1、演示视频 基于Java Swing的拼图小游戏2、项目截图 三、设计说明 3.1 整体架构设计 项目采用单窗体架构,核心类为PuzzleGame(继承JFrame),包含以下核心模块: 窗口初始化模块:设置窗体大小、标题、布局…

作者头像 李华
网站建设 2026/8/25 18:00:56

Wan2.2-T2V-A14B在文旅宣传视频批量生成中的落地实践

Wan2.2-T2V-A14B在文旅宣传视频批量生成中的落地实践 如今,一个省级文旅厅要在清明节前推出“踏青系列”短视频——覆盖10个城市、每个城市3条内容,共计30支短片。如果按传统流程,需要协调多地摄制组、安排外景拍摄、后期剪辑调色&#xff0c…

作者头像 李华