要让 支持多文件选择，必须添加 multiple 属性；仅靠 ctrl/cmd 多选无效。需配合 js 限制数量、accept 过滤类型、遍历 filelist 添加到 formdata，并做好前端校验、并发控制与服务端配置。
如何让 <input type="file"> 支持多文件选择
默认情况下，<input type="file"> 只能选一个文件。要支持多选，必须显式添加 multiple 属性——不加就永远只能传一个，哪怕用户按住 Ctrl 或 Cmd 多选，浏览器也只取第一个。
实操建议：
-
<input type="file" multiple>是基础，但注意它不控制单次最多选几个，全靠用户自己决定 - 如果想限制数量（比如最多 5 个），得在 JS 中检查
event.target.files.length，超出就alert或清空并提示 -
accept属性可辅助过滤类型，例如accept="image/*,.pdf"，但它只是提示性限制，不能阻止用户绕过 - 不要用
name="files[]"这类 PHP 风格命名来“期待”后端自动解析数组——现代后端框架（如 Express、FastAPI）收到的是多个同名字段或 FormData 的键值对，不是天然数组
FormData 中如何正确 append 多个文件
很多人直接写 formData.append("files", fileInput.files)，结果后端只收到一个空对象或报错——因为 FileList 不是数组，不能直接 append，必须遍历。
实操建议：
- 用
for (let i = 0; i 或 <code>Array.from(fileInput.files).forEach(...)转成数组再遍历 - 每个文件单独
append("files", file)，后端才能按名字拿到多个同名字段；若用append("files", file, file.name)，可避免文件名丢失（尤其 Safari 对 File.name 有时返回空字符串） - 别漏掉其他表单字段：文本输入框要用
formData.append("title", titleInput.value)显式添加，FormData 不会自动收集非type="file"的控件 - 调试时打印
formData.getAll("files")看是否真有多个项，比抓包更快
后端接收时常见的文件名/顺序问题
前端 append 多个同名字段，不同后端处理方式差异很大：express-fileupload 默认只取第一个，multer 需用 upload.array("files")，而 FastAPI 的 UploadFile 列表参数必须声明为 List[UploadFile]，否则 422。
实操建议：
- Node.js + multer：用
upload.array("files", 10)，第二个参数是最大数量，超了会 400，不是静默截断 - Python + FastAPI：函数参数写成
files: List[UploadFile]，别漏掉from typing import List和from fastapi import UploadFile - 文件名在传输中可能被浏览器改写（比如空格变下划线），后端别直接信任
file.filename做存储路径，最好用 UUID 重命名 - 上传顺序和用户选择顺序一致，但某些老版本 Android WebView 会乱序，如有依赖顺序的逻辑（如首图做封面），前端应主动排序或加索引字段
大文件或多文件并发上传的稳定性处理
一次传 20 个 50MB 文件，不加控制很容易触发浏览器内存溢出、请求超时或后端拒绝连接——这不是代码写错，而是资源边界问题。
实操建议：
- 用
file.size在前端校验单个文件上限（比如 > 100MB 就拦截），比等上传失败再提示更友好 - 并发数控制：别一次性
Promise.all(uploadPromises)，改用p-limit库或手写队列，比如同时最多 3 个请求 - 每个请求配独立
AbortController，用户点击取消时能真正中断正在进行的上传，而不是只停 UI - 服务端 Nginx 需调大
client_max_body_size和fastcgi_read_timeout，否则大文件直接 413 或 504
多文件上传真正难的不是语法，是边界：用户乱选、网络中断、后端配置、内存占用——这些点漏掉任何一个，上线后都会变成凌晨三点的告警。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
