formdata必须手动创建，浏览器会忽略input[type="file"]的值；需用new formdata()并显式append文件和字段，且ajax须设processdata: false和contenttype: false，否则后端收不到文件。
FormData 必须手动创建，不能直接用 $.ajax({ data: $('#form')[0] })
很多人以为把表单 DOM 传给 data 就能自动打包文件，其实不行。浏览器会忽略 input[type="file"] 的值，FormData 才是唯一能正确提取二进制文件对象的机制。
常见错误现象：$_FILES 在 PHP 后端为空、request.files 在 Python Flask 中为 empty、Node.js 的 req.file 未定义 —— 全是因为前端没走 FormData。
- 基于已有表单：用
new FormData(document.getElementById('uploadForm'))，不要用 jQuery 对象包装后再取[0]，避免意外丢失引用 - 动态添加文件（比如拖拽或多次选择）：先
new FormData()，再循环调用fd.append('files[]', file)，注意键名带[]才能让后端接收为数组 - 额外字段（如 token、type）必须用
fd.append('token', 'abc123')显式追加，不能靠表单隐藏域自动收集（除非该隐藏域在 form 内且已渲染）
processData: false 和 contentType: false 缺一不可
jQuery 的 $.ajax 默认会把 data 序列化成字符串，并设置 Content-Type: application/x-www-form-urlencoded —— 这对文件上传是致命的。浏览器会把整个 FormData 当作普通字符串发出去，服务端根本解析不出文件。
这两个配置的作用：
-
processData: false→ 禁用 jQuery 自动序列化，让原始FormData对象原样交给 XHR -
contentType: false→ 让浏览器自己设置正确的multipart/form-data; boundary=...头，其中boundary是随机分隔符，必须由浏览器生成
漏掉任意一个，后端都收不到文件。尤其容易忽略的是：即使你用了原生 fetch，也得显式不设 Content-Type，否则浏览器不会自动补上 boundary。
原生 fetch 比 jQuery 更干净，但要注意 response.text() 而非 .json()
如果后端返回纯文本（比如 PHP 的 echo 'success.jpg'），用 response.json() 会报错 Unexpected token s in JSON —— 因为它不是合法 JSON。
示例写法：
const fd = new FormData();
fd.append('file', fileInput.files[0]);
fd.append('category', 'avatar');
fetch('/upload.php', {
method: 'POST',
body: fd // 不设 headers，让浏览器自动加
})
.then(r => r.text()) // ← 关键：用 text() 接收任意格式响应
.then(text => console.log('服务器返回：', text))
.catch(err => console.error('上传失败：', err));
对比 jQuery：dataType: 'text' 才对应这里的 r.text()；若设成 'json'，后端就必须返回 {"url": "xxx"} 这样的结构，否则直接抛错。
服务端接收不到文件？先查 Content-Length 和 boundary
打开浏览器 DevTools → Network → 点开上传请求 → Headers → Request Headers，确认两点：
- 是否存在
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryxxx -
Content-Length是否明显大于 0（比如几百字节以上）
如果这两项缺失或异常，问题一定出在前端：要么没设 contentType: false，要么 FormData 构造时传入了空 FileList（比如用户没选文件就点了上传）。
真正容易被忽略的点：某些 UI 框架（如 Element Plus、Ant Design）的上传组件会封装一层逻辑，内部可能没正确透传 FormData 或覆盖了 contentType。这种情况下，宁可绕过组件，用原生 input[type="file"] + 手动 fetch 控制权更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
