必须显式设置form的enctype="multipart/form-data"且method不能为get；否则文件不会发送。该属性仅在form标签上有效，大小写敏感、拼写准确，且需配合post/put/patch方法；fetch上传时应直接传FormData对象而非手动设header。

必须显式写 enctype="multipart/form-data" 在

标签上，且 method 不能是 get；否则文件根本不会发出——不是后端收不到，是前端压根没传。

enctype="multipart/form-data" 必须写在

上，不能写在 里

浏览器只认 这个属性， 完全无效。常见错误包括：

• → 属性位置错，不起作用
• → 大小写混乱，部分解析器会拒收
• → 拼错 multipart，boundary 不生成，后端 req.files 为空

统一用小写、无空格、无多余字符：enctype="multipart/form-data" 是唯一安全写法。

method="get" 配 enctype 是无效组合

HTTP GET 请求没有请求体（body），而 multipart/form-data 必须靠 body 传输分块数据。浏览器遇到

会直接忽略 enctype，退回到默认的 application/x-www-form-urlencoded 编码， 字段被静默丢弃。

可用的 method 值只有带 body 的： post、put、patch。绝大多数场景用 method="post" 即可。

用 fetch + FormData 时，enctype 属性本身不生效

原生表单提交才看

；JS 手动发请求时，起作用的是你构造的数据对象。

只要用了 new FormData(formElement) 或 FormData.append('file', input.files[0])，浏览器会自动设置 Content-Type: multipart/form-data; boundary=...。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

⚠️ 错误写法：fetch('/upload', { headers: { 'Content-Type': 'multipart/form-data' } }) —— 手动设 header 但没提供 boundary，服务端报 Invalid boundary in multipart。

✅ 正确写法：fetch('/upload', { method: 'POST', body: new FormData(form) })，让浏览器自动生成完整头和 boundary。

表单里有 就必须整个表单设 multipart

哪怕同时还有十几个文本字段，只要有一个 ，整个表单就必须用 enctype="multipart/form-data"。不存在“部分字段用 multipart、部分用 urlencoded”的混合编码。

后端收到的请求体是混在一起的多个 part：文本字段走 Content-Disposition: form-data; name="username"，文件字段多一层 filename="xxx.jpg" 和真实的 Content-Type。Flask 要用 request.form.get('username') 和 request.files.get('avatar') 分开取；Spring Boot 要区分 @RequestParam 和 @RequestPart。

name 属性大小写敏感， 和后端 request.files.get('avatar') 对不上，字段就为空。

最容易被忽略的一点：动态创建表单时，form.enctype = 'multipart/form-data' 必须显式设置，否则仍是默认编码。别指望浏览器自动补。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！