news 2026/6/15 14:21:08

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/6/15 9:55:24

人工智能:重塑未来的核心驱动力

在当今科技飞速发展的时代,人工智能(AI)正以惊人的速度渗透到社会的各个领域,从日常生活到工业生产,从医疗健康到教育培训,AI的身影无处不在。它不再是科幻电影中的想象,而是切切实实改变着我们…

作者头像 李华
网站建设 2026/6/14 21:30:37

已注册商标提前几年续展可以办理不!

前一阵普推知产商标老杨遇到有个企业网友,说近期老有人给他打电话,让他续展商标,但是他在2023年时花几千元已经续展过商标,不知什么问题,于是让他发来商标信息查询下。已注册商标有效期是10年,经检索发现那…

作者头像 李华
网站建设 2026/6/15 10:00:41

Wan2.2-T2V-A14B在社交媒体短视频爆发式生产中的价值

Wan2.2-T2V-A14B在社交媒体短视频爆发式生产中的价值 如今,一条爆款短视频从创意到上线,可能只需要几分钟。你有没有注意到,越来越多的品牌内容看起来既熟悉又“不像人工做的”?那些画面精致、节奏流畅的节日祝福、产品宣传甚至剧…

作者头像 李华