news 2026/7/7 11:56:12

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/7/7 14:28:56

靠谱的航天级SSD固态硬盘信誉好的厂家

靠谱的航天级SSD固态硬盘信誉好的厂家在当今科技飞速发展的时代,航天领域对数据存储的要求愈发严苛,航天级SSD固态硬盘的质量和可靠性至关重要。选择一家信誉好的厂家,是保障航天项目数据安全与稳定运行的关键。湖南天硕创新科技有限公司&…

作者头像 李华
网站建设 2026/7/7 2:55:42

Blender 3MF插件完整使用手册

Blender 3MF插件完整使用手册 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 插件概述与核心价值 Blender 3MF插件是连接3D建模与3D打印制造的关键桥梁。该插件为Blende…

作者头像 李华
网站建设 2026/7/7 16:11:30

阿里自研Wan2.2-T2V-A14B模型究竟有多强?深度测评来了

阿里自研Wan2.2-T2V-A14B模型究竟有多强?深度测评来了 在短视频日活突破十亿、内容创作进入“秒级迭代”的今天,一个令人深思的问题浮现:当人类创意的速度赶不上平台需求的节奏时,谁来填补这场生产力危机? 答案或许正从…

作者头像 李华
网站建设 2026/7/7 10:06:44

31、Git工具的使用与配置指南

Git工具的使用与配置指南 1. Git与Eclipse IDE的结合使用 在使用Eclipse IDE进行项目开发时,若遇到 .project 文件名,可选择不勾选它。之后点击“Commit”按钮,就能将更改提交到仓库。 当对仓库进行更改后,可以查看历史视图中提交的显示情况,此视图等同于 git log …

作者头像 李华
网站建设 2026/7/7 15:35:35

AI语音变声技术终极指南:从零开始掌握实时声音转换的秘诀

AI语音变声技术终极指南:从零开始掌握实时声音转换的秘诀 【免费下载链接】voice-changer リアルタイムボイスチェンジャー Realtime Voice Changer 项目地址: https://gitcode.com/gh_mirrors/vo/voice-changer 想要在直播中变身心仪角色,或在游…

作者头像 李华
网站建设 2026/7/7 18:33:55

Wan2.2-T2V-A14B在非遗文化传承纪录片中的创造性转化

Wan2.2-T2V-A14B在非遗文化传承纪录片中的创造性转化 在贵州深山的苗寨里,一位老匠人正用铁锤敲打一块烧红的银坯,火星四溅,银片逐渐延展成凤凰的模样。这样的画面如果出现在纪录片中,观众会为之动容——但现实中,许多…

作者头像 李华