根本原因是后端解析逻辑或表单配置断在某个环节，常见断点为：enctype未显式设置、name属性不统一、后端未按数组接收；必须确认form含enctype="multipart/form-data"且method="post"，input带multiple和一致name（如"photos"），后端用upload.array('photos')、@requestparam("photos") multipartfile[]或遍历$_files'photos'。
为什么加了 multiple 还是只收到一个文件
根本原因不是前端没选多文件，而是后端解析逻辑或表单配置断在某个环节。常见断点有三个：enctype 漏设、name 属性不统一、后端没启用多值接收。
必须确认：<form></form> 标签显式写了 enctype="multipart/form-data" 且 method="POST"；<input type="file"> 同时带 multiple 和 name（如 name="photos"，别用 name="photos[]"，现代框架已不依赖方括号）；后端代码明确按数组接收——比如 Express 用 upload.array('photos')，Spring Boot 用 @RequestParam("photos") MultipartFile[] files，PHP 则遍历 $_FILES['photos']['name'] 数组。
容易踩的坑：
-
value属性永远只显示第一个文件的伪造路径，别拿它判断是否多选；真要校验数量，读input.files.length - 用
FormData.append('photos', file)往 FormData 里塞多个文件时，key 名必须完全一致，不能拼错大小写或空格 - 调试时直接看 Network → Payload，确认每个文件是否作为独立条目出现，而不是合并成一个 blob 或只有一项
PHP 8.1 中 $_FILES 为空但没报错
这不是代码 bug，是 PHP 静默截断：当所有文件总大小 + 表单字段开销超过 post_max_size，整个 POST 请求体被丢弃，$_FILES 和 $_POST 全为空，且不抛异常。
验证方式：查 PHP 错误日志，搜 POST Content-Length of XXXXX bytes exceeds the limit。必须同步调大三项配置（单位统一为 M）：
-
upload_max_filesize = 20M（单个文件上限） -
post_max_size = 50M（整个请求上限，必须 ≥ 所有文件 size 总和 + 开销，5 个 8MB 文件至少留 45M） -
memory_limit = 256M（避免解析时内存溢出）
改完 php.ini 后，必须重启 Web 服务（sudo systemctl restart php-fpm && sudo systemctl restart nginx），并用 phpinfo() 或 ini_get('post_max_size') 确认生效值。
前端校验通过但上传仍失败的隐藏条件
用户看到“文件类型/大小符合要求”，不代表能成功发到后端。Nginx、Apache 或云 WAF 可能在网关层就拦截了大请求。
关键检查点：
- Nginx：确认
client_max_body_size（单位MB或g） ≥post_max_size，否则请求根本进不了 PHP - Apache：检查
LimitRequestBody是否设得太小 - IIS/.NET：
maxRequestLength（单位 KB）和maxAllowedContentLength（单位 Byte）都要调大 - 浏览器限制本身不存在，但 iOS 低版本 Safari 对拖拽多选支持差，建议 fallback 到点击选择
最简验证法：用 curl -F "photos=@a.jpg" -F "photos=@b.jpg" http://localhost/upload 直连后端，绕过前端 JS 和浏览器限制，快速定位是前端还是网关问题。
用 fetch + FormData 上传时的 Content-Type 坑
手动设置 Content-Type 是最常见的失败操作。只要用 FormData，就别碰这个头——浏览器会自动设为 multipart/form-data; boundary=xxxx，且 boundary 是动态生成的，硬编码或覆盖会导致后端无法解析。
正确写法只有这一种：
const formData = new FormData();
for (const file of input.files) {
formData.append('photos', file);
}
fetch('/upload', { method: 'POST', body: formData });
// 不要加 headers: { 'Content-Type': '...' }
如果用了 axios，也别手动设 headers，让它自己推导；若用旧版 axios（Content-Type 头，需显式传 { headers: {} } 让其保留自动设置。
真正需要干预的，是后端对同名 key 的解析能力——比如 Express 默认只收一个 req.file，必须用 multer().array('photos') 显式声明多文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
