1. 从一个让人抓狂的表单Bug说起多文件上传这个功能做过前端表单的人基本都碰过。表面上看逻辑特别简单用户选几个文件渲染一个列表每个文件后面挂个删除按钮点一下从列表里移除最后提交表单。但真正动手写的时候很多人会卡在一个非常反直觉的地方——你明明在页面上把文件删掉了提交表单时后端收到的却还是原来那一堆文件。这个问题的根源藏在input[typefile]元素的FileList对象里。FileList是一个只读的类数组对象它和文件输入框绑定在一起你没法直接对它做splice、pop或者重新赋值。换句话说用户通过文件选择器选中的文件一旦进入FileList就相当于被焊死在了那个 input 上。你在 Vue 或 React 的 data/state 里维护的数组删得干干净净但真正跟着表单提交走的还是那个 input 里的原始FileList。这篇文章就是围绕这个坑展开的。我会把FileList为什么改不了、常见的几种错误写法、以及真正能落地的解决方案包括DataTransfer重建、FormData 手动组装、以及配合组件库时的处理方式完整拆一遍。适合正在做上传功能的前端开发者尤其是用 Vue、React 配合 Element Plus、Ant Design 这类组件库的同学。看完之后你不仅能修掉这个 bug还能理解表单提交时文件到底是怎么被带上去的。2. 为什么 FileList 删不掉核心机制拆解2.1 FileList 到底是什么先把这个对象的本质说清楚。当你在页面上写一个input typefile multiple idupload /用户选中文件后通过document.getElementById(upload).files拿到的就是一个FileList对象。它长得像数组有length能用下标访问files[0]、files[1]但它不是数组没有push、splice、filter这些方法。更关键的一点FileList是只读的。规范里明确定义了它的属性都是只读的你没法这样写// 这些全都是无效操作 input.files.length 0; input.files[0] newFile; input.files myArray;最后一行input.files myArray看起来好像能赋值实际上浏览器会直接忽略或者抛错因为files这个属性的 setter 在大多数实现里是不接受普通数组的。2.2 表单提交时文件是怎么被带走的理解这个问题的关键是要搞清楚表单提交时到底读的是什么。当你用原生的form提交或者用new FormData(formElement)去序列化一个表单时浏览器会去遍历表单里的每一个表单控件。对于input[typefile]它读取的就是这个 input 当前的files属性——也就是那个FileList。所以整个链路是这样的用户选文件 → 浏览器把文件塞进 input 的FileList你在 JS 里维护一个数组用于渲染列表 → 这个数组和FileList是两份独立的数据用户点删除 → 你只删了 JS 数组FileList纹丝不动提交表单 → 浏览器读FileList→ 被删除的文件还在这就是为什么页面上看起来删干净了后端却收到了全部文件。你操作的根本不是同一份数据。2.3 为什么框架的响应式也救不了用 Vue 的同学可能会想我把files放在data里用v-for渲染删除的时候splice一下响应式更新不就行了问题在于你v-for渲染的那个数组往往是你自己从FileList里拷贝出来的一个普通数组比如handleChange(e) { this.fileList Array.from(e.target.files); }这个fileList确实可以随便删页面也会正确更新。但它和 input 的FileList已经没有任何关系了。提交的时候如果用的是new FormData(form)读的还是 input 的FileList你的fileList根本没参与提交。React 同理useState里存的数组删得再干净只要提交走的是原生表单序列化一样白搭。3. 三种典型错误写法看看你中了几个3.1 错误写法一直接改 FileList这是最直接的一种新手很容易写出来// 想删除第一个文件 input.files.splice(0, 1); // 报错splice is not a function input.files.length 0; // 静默失败length 改不动FileList没有数组方法length也是只读的。这种写法要么报错要么毫无效果但页面上的列表如果用的是另一份数据你会误以为删除成功了。3.2 错误写法二只删渲染数组提交走原生表单这种最隐蔽因为页面上一切正常input typefile multiple changehandleChange reffileInput / ul li v-for(file, index) in fileList :keyindex {{ file.name }} button clickremoveFile(index)删除/button /li /ulhandleChange(e) { this.fileList Array.from(e.target.files); }, removeFile(index) { this.fileList.splice(index, 1); }, submit() { const formData new FormData(this.$refs.form); // 提交 formData里面带的是 input 的原始 FileList }fileList删得干干净净FormData里却还是全部文件。这个 bug 在测试的时候如果只测选文件→提交不测选文件→删除→提交很容易漏掉。3.3 错误写法三以为清空 input.value 就能清空文件有人会尝试input.value ;这行代码确实能清空 input 显示的文件名也能让input.files变成空的FileList。但它是全部清空不是删除某一个。如果你想保留一部分、删掉另一部分这招没用。而且有些浏览器对value赋空字符串的行为处理不一致不能作为精确删除的手段。4. 真正能用的解决方案4.1 方案一用 DataTransfer 重建 FileList这是最正统的做法。DataTransfer对象有一个items属性可以通过DataTransferItemList来增删文件最后把整个DataTransfer.files赋值给 input。核心思路是维护一个自己的文件数组每次删除后用剩下的文件重新构造一个DataTransfer再把它塞回 input。// 维护的文件数组 let selectedFiles []; function handleChange(e) { // 把新选的文件合并进来 selectedFiles Array.from(e.target.files); renderList(); } function removeFile(index) { // 从自己的数组里删 selectedFiles.splice(index, 1); // 重建 FileList 并塞回 input syncToInput(); renderList(); } function syncToInput() { const dt new DataTransfer(); selectedFiles.forEach(file { dt.items.add(file); }); input.files dt.files; }这里的关键是input.files dt.files这一行。注意只有DataTransfer.files才能赋值给 input.files普通数组不行。这也是为什么必须绕一圈用DataTransfer。DataTransfer的兼容性现在很好主流浏览器都支持。dt.items.add(file)可以接受File对象添加进去之后dt.files就是一个新的、包含你指定文件的FileList。注意DataTransfer在部分老版本浏览器里构造后items可能不可用如果项目需要兼容很老的浏览器建议做特性检测降级到方案二。4.2 方案二放弃原生表单序列化手动组装 FormData如果你不想折腾DataTransfer还有一个更省心的思路提交的时候不用new FormData(form)而是自己手动 append。function submit() { const formData new FormData(); // 手动把其他表单字段加进去 formData.append(username, this.username); formData.append(title, this.title); // 只 append 你数组里剩下的文件 selectedFiles.forEach(file { formData.append(files, file); }); // 发送请求 axios.post(/api/upload, formData); }这个方案的好处是彻底摆脱了FileList的束缚。你的selectedFiles数组就是唯一的数据源删了就没了提交时也只 append 剩下的。缺点是需要手动处理所有表单字段如果表单字段很多写起来会有点啰嗦。实际项目里我一般推荐这个方案因为它逻辑最清晰不容易出幺蛾子。尤其是配合 axios 或 fetch 手动发请求的场景本来就不走原生表单提交用这个方案最自然。4.3 方案三配合组件库的处理方式如果你用的是 Element Plus 的el-upload或者 Ant Design 的Upload情况会好一些因为这些组件内部已经帮你维护了文件列表删除逻辑也是组件自己处理的。以 Element Plus 为例el-upload refuploadRef :auto-uploadfalse :file-listfileList :on-changehandleChange :on-removehandleRemove multiple el-button选择文件/el-button /el-uploadfunction handleChange(file, fileList) { this.fileList fileList; } function handleRemove(file, fileList) { this.fileList fileList; } function submit() { const formData new FormData(); this.fileList.forEach(item { // el-upload 的 file 对象里原始文件在 raw 属性上 formData.append(files, item.raw); }); // 提交 }这里的关键是不要依赖组件内部的 input 去提交而是从fileList里拿raw原始 File 对象自己组装FormData。组件库的fileList是响应式的删除后会自动更新你只要在提交时读它就行。Ant Design 的Upload类似fileList里的每一项有originFileObj提交时用它。踩坑提醒Element Plus 的el-upload在auto-uploadfalse时file-list是受控的你必须自己维护它否则删除后组件内部状态和你的数据会对不上。这一点官方文档写得比较隐晦我第一次用的时候也绕了半天。5. 完整实操从选文件到提交的闭环5.1 需求拆解与数据结构设计假设我们要做一个多文件上传 可删除 带其他表单字段的功能。先把数据结构定清楚selectedFiles一个普通数组存File对象这是唯一的数据源formData其他文本字段比如标题、描述提交时手动组装FormData把selectedFiles里的文件逐个 append这个设计的好处是selectedFiles完全由我们控制增删改查都是普通数组操作不涉及任何只读对象。5.2 选文件与去重处理用户可能会分多次选文件也可能重复选同一个文件。这里要做合并和去重function handleFileChange(e) { const newFiles Array.from(e.target.files); // 按 name size lastModified 去重 const existingKeys new Set( selectedFiles.map(f ${f.name}_${f.size}_${f.lastModified}) ); newFiles.forEach(file { const key ${file.name}_${file.size}_${file.lastModified}; if (!existingKeys.has(key)) { selectedFiles.push(file); existingKeys.add(key); } }); // 清空 input保证下次选同一个文件还能触发 change e.target.value ; renderList(); }这里有两个细节值得说。第一去重的 key 用name size lastModified组合比单纯用name靠谱因为不同文件可能重名。第二处理完后把e.target.value清空这样用户下次选同一个文件时change事件还能触发——否则浏览器会认为文件没变不触发事件。5.3 删除逻辑与 FileList 同步删除就是普通的数组splice但如果你还想让 input 的FileList保持同步比如某些场景下需要 input 参与原生提交就要用DataTransfer重建function removeFile(index) { selectedFiles.splice(index, 1); syncInputFiles(); renderList(); } function syncInputFiles() { const dt new DataTransfer(); selectedFiles.forEach(file dt.items.add(file)); fileInput.value.files dt.files; }如果你走的是方案二手动组装 FormDatasyncInputFiles这步可以省掉因为提交根本不读 input。5.4 提交时的 FormData 组装async function submit() { if (selectedFiles.length 0) { alert(请至少选择一个文件); return; } const formData new FormData(); formData.append(title, title); formData.append(description, description); selectedFiles.forEach(file { formData.append(files, file); }); const res await fetch(/api/upload, { method: POST, body: formData }); // 处理响应 }注意formData.append(files, file)里的files是后端接收的字段名多个文件用同一个字段名 append后端就能拿到一个数组。这一点要和后端约定好有的后端期望files[]有的期望files别搞错了。5.5 提交后重置状态提交成功后记得把selectedFiles清空input 也清空selectedFiles []; fileInput.value.value ; renderList();如果不清 input 的 value用户再次选同一个文件可能不触发 change。这个细节很多人会忘。6. 常见问题与排查速查表6.1 问题速查表现象可能原因解决方向删除后提交文件还在提交读的是 input 的 FileList改用手动组装 FormDatainput.files.splice报错FileList 没有数组方法用普通数组维护或 DataTransfer 重建input.files array无效只能赋值 FileList用DataTransfer.files删除后页面没更新渲染数组和 FileList 不同步统一数据源删除后重新渲染重复选同一文件不触发 changeinput value 未清空处理后e.target.value 组件库删除后提交仍有文件提交走了组件内部 input从 fileList 取 raw 手动组装后端收到的文件数量不对append 字段名不一致和后端确认字段名6.2 几个容易忽略的坑坑一DataTransfer构造后 items 为空。有些浏览器在new DataTransfer()之后items需要先 add 才能用直接读dt.files是空的。这是正常的add 完再读就行。坑二File对象的lastModified在某些场景下不稳定。比如从剪贴板粘贴的文件lastModified可能是当前时间。去重时如果发现异常可以退化成只用name size。坑三大文件场景下不要频繁重建 DataTransfer。每次删除都重建一次如果文件很多很大会有性能开销。可以做个防抖或者只在提交前同步一次。坑四FormData里 append 的 File 对象如果被后续操作修改了引用可能出问题。一般不会但如果你在 append 之后又去改selectedFiles要注意FormData里存的是引用还是拷贝。实测下来append之后FormData会持有文件的引用所以提交前不要再动数组。6.3 一个实用的调试技巧如果你不确定提交时到底带了哪些文件可以在发请求前打印一下for (const [key, value] of formData.entries()) { if (value instanceof File) { console.log(key, value.name, value.size); } else { console.log(key, value); } }这样能清楚看到FormData里实际有哪些字段和文件比在 Network 面板里翻要直观。我排查这类问题时基本都靠这一招几秒钟就能定位是数据源的问题还是提交的问题。7. 我个人的几点实操体会做过多文件上传之后我现在的习惯是永远不依赖 input 的 FileList 作为数据源。input 只负责触发选择事件选完之后立刻把文件转成普通数组后续所有增删改查都在这个数组上做提交时手动组装FormData。这样虽然多写几行代码但逻辑清晰不会出现页面删了、提交还在这种诡异问题。另外DataTransfer这个方案虽然正统但实际项目里我用得不多因为它解决的是让 input 的 FileList 和我的数组同步这个问题而如果我压根不走原生表单提交这个问题就不存在。所以选方案的时候先问自己一句我到底走不走原生表单序列化不走的话方案二最省事。最后提一个容易被忽略的点删除文件时最好给用户一个确认尤其是文件比较大的时候。用户误删一个大文件重新选一遍很烦。这个不算技术问题但体验上差别很大。
1. 从一个让人抓狂的表单Bug说起多文件上传这个功能做过前端表单的人基本都碰过。表面上看逻辑特别简单用户选几个文件渲染一个列表每个文件后面挂个删除按钮点一下从列表里移除最后提交表单。但真正动手写的时候很多人会卡在一个非常反直觉的地方——你明明在页面上把文件删掉了提交表单时后端收到的却还是原来那一堆文件。这个问题的根源藏在input[typefile]元素的FileList对象里。FileList是一个只读的类数组对象它和文件输入框绑定在一起你没法直接对它做splice、pop或者重新赋值。换句话说用户通过文件选择器选中的文件一旦进入FileList就相当于被焊死在了那个 input 上。你在 Vue 或 React 的 data/state 里维护的数组删得干干净净但真正跟着表单提交走的还是那个 input 里的原始FileList。这篇文章就是围绕这个坑展开的。我会把FileList为什么改不了、常见的几种错误写法、以及真正能落地的解决方案包括DataTransfer重建、FormData 手动组装、以及配合组件库时的处理方式完整拆一遍。适合正在做上传功能的前端开发者尤其是用 Vue、React 配合 Element Plus、Ant Design 这类组件库的同学。看完之后你不仅能修掉这个 bug还能理解表单提交时文件到底是怎么被带上去的。2. 为什么 FileList 删不掉核心机制拆解2.1 FileList 到底是什么先把这个对象的本质说清楚。当你在页面上写一个input typefile multiple idupload /用户选中文件后通过document.getElementById(upload).files拿到的就是一个FileList对象。它长得像数组有length能用下标访问files[0]、files[1]但它不是数组没有push、splice、filter这些方法。更关键的一点FileList是只读的。规范里明确定义了它的属性都是只读的你没法这样写// 这些全都是无效操作 input.files.length 0; input.files[0] newFile; input.files myArray;最后一行input.files myArray看起来好像能赋值实际上浏览器会直接忽略或者抛错因为files这个属性的 setter 在大多数实现里是不接受普通数组的。2.2 表单提交时文件是怎么被带走的理解这个问题的关键是要搞清楚表单提交时到底读的是什么。当你用原生的form提交或者用new FormData(formElement)去序列化一个表单时浏览器会去遍历表单里的每一个表单控件。对于input[typefile]它读取的就是这个 input 当前的files属性——也就是那个FileList。所以整个链路是这样的用户选文件 → 浏览器把文件塞进 input 的FileList你在 JS 里维护一个数组用于渲染列表 → 这个数组和FileList是两份独立的数据用户点删除 → 你只删了 JS 数组FileList纹丝不动提交表单 → 浏览器读FileList→ 被删除的文件还在这就是为什么页面上看起来删干净了后端却收到了全部文件。你操作的根本不是同一份数据。2.3 为什么框架的响应式也救不了用 Vue 的同学可能会想我把files放在data里用v-for渲染删除的时候splice一下响应式更新不就行了问题在于你v-for渲染的那个数组往往是你自己从FileList里拷贝出来的一个普通数组比如handleChange(e) { this.fileList Array.from(e.target.files); }这个fileList确实可以随便删页面也会正确更新。但它和 input 的FileList已经没有任何关系了。提交的时候如果用的是new FormData(form)读的还是 input 的FileList你的fileList根本没参与提交。React 同理useState里存的数组删得再干净只要提交走的是原生表单序列化一样白搭。3. 三种典型错误写法看看你中了几个3.1 错误写法一直接改 FileList这是最直接的一种新手很容易写出来// 想删除第一个文件 input.files.splice(0, 1); // 报错splice is not a function input.files.length 0; // 静默失败length 改不动FileList没有数组方法length也是只读的。这种写法要么报错要么毫无效果但页面上的列表如果用的是另一份数据你会误以为删除成功了。3.2 错误写法二只删渲染数组提交走原生表单这种最隐蔽因为页面上一切正常input typefile multiple changehandleChange reffileInput / ul li v-for(file, index) in fileList :keyindex {{ file.name }} button clickremoveFile(index)删除/button /li /ulhandleChange(e) { this.fileList Array.from(e.target.files); }, removeFile(index) { this.fileList.splice(index, 1); }, submit() { const formData new FormData(this.$refs.form); // 提交 formData里面带的是 input 的原始 FileList }fileList删得干干净净FormData里却还是全部文件。这个 bug 在测试的时候如果只测选文件→提交不测选文件→删除→提交很容易漏掉。3.3 错误写法三以为清空 input.value 就能清空文件有人会尝试input.value ;这行代码确实能清空 input 显示的文件名也能让input.files变成空的FileList。但它是全部清空不是删除某一个。如果你想保留一部分、删掉另一部分这招没用。而且有些浏览器对value赋空字符串的行为处理不一致不能作为精确删除的手段。4. 真正能用的解决方案4.1 方案一用 DataTransfer 重建 FileList这是最正统的做法。DataTransfer对象有一个items属性可以通过DataTransferItemList来增删文件最后把整个DataTransfer.files赋值给 input。核心思路是维护一个自己的文件数组每次删除后用剩下的文件重新构造一个DataTransfer再把它塞回 input。// 维护的文件数组 let selectedFiles []; function handleChange(e) { // 把新选的文件合并进来 selectedFiles Array.from(e.target.files); renderList(); } function removeFile(index) { // 从自己的数组里删 selectedFiles.splice(index, 1); // 重建 FileList 并塞回 input syncToInput(); renderList(); } function syncToInput() { const dt new DataTransfer(); selectedFiles.forEach(file { dt.items.add(file); }); input.files dt.files; }这里的关键是input.files dt.files这一行。注意只有DataTransfer.files才能赋值给 input.files普通数组不行。这也是为什么必须绕一圈用DataTransfer。DataTransfer的兼容性现在很好主流浏览器都支持。dt.items.add(file)可以接受File对象添加进去之后dt.files就是一个新的、包含你指定文件的FileList。注意DataTransfer在部分老版本浏览器里构造后items可能不可用如果项目需要兼容很老的浏览器建议做特性检测降级到方案二。4.2 方案二放弃原生表单序列化手动组装 FormData如果你不想折腾DataTransfer还有一个更省心的思路提交的时候不用new FormData(form)而是自己手动 append。function submit() { const formData new FormData(); // 手动把其他表单字段加进去 formData.append(username, this.username); formData.append(title, this.title); // 只 append 你数组里剩下的文件 selectedFiles.forEach(file { formData.append(files, file); }); // 发送请求 axios.post(/api/upload, formData); }这个方案的好处是彻底摆脱了FileList的束缚。你的selectedFiles数组就是唯一的数据源删了就没了提交时也只 append 剩下的。缺点是需要手动处理所有表单字段如果表单字段很多写起来会有点啰嗦。实际项目里我一般推荐这个方案因为它逻辑最清晰不容易出幺蛾子。尤其是配合 axios 或 fetch 手动发请求的场景本来就不走原生表单提交用这个方案最自然。4.3 方案三配合组件库的处理方式如果你用的是 Element Plus 的el-upload或者 Ant Design 的Upload情况会好一些因为这些组件内部已经帮你维护了文件列表删除逻辑也是组件自己处理的。以 Element Plus 为例el-upload refuploadRef :auto-uploadfalse :file-listfileList :on-changehandleChange :on-removehandleRemove multiple el-button选择文件/el-button /el-uploadfunction handleChange(file, fileList) { this.fileList fileList; } function handleRemove(file, fileList) { this.fileList fileList; } function submit() { const formData new FormData(); this.fileList.forEach(item { // el-upload 的 file 对象里原始文件在 raw 属性上 formData.append(files, item.raw); }); // 提交 }这里的关键是不要依赖组件内部的 input 去提交而是从fileList里拿raw原始 File 对象自己组装FormData。组件库的fileList是响应式的删除后会自动更新你只要在提交时读它就行。Ant Design 的Upload类似fileList里的每一项有originFileObj提交时用它。踩坑提醒Element Plus 的el-upload在auto-uploadfalse时file-list是受控的你必须自己维护它否则删除后组件内部状态和你的数据会对不上。这一点官方文档写得比较隐晦我第一次用的时候也绕了半天。5. 完整实操从选文件到提交的闭环5.1 需求拆解与数据结构设计假设我们要做一个多文件上传 可删除 带其他表单字段的功能。先把数据结构定清楚selectedFiles一个普通数组存File对象这是唯一的数据源formData其他文本字段比如标题、描述提交时手动组装FormData把selectedFiles里的文件逐个 append这个设计的好处是selectedFiles完全由我们控制增删改查都是普通数组操作不涉及任何只读对象。5.2 选文件与去重处理用户可能会分多次选文件也可能重复选同一个文件。这里要做合并和去重function handleFileChange(e) { const newFiles Array.from(e.target.files); // 按 name size lastModified 去重 const existingKeys new Set( selectedFiles.map(f ${f.name}_${f.size}_${f.lastModified}) ); newFiles.forEach(file { const key ${file.name}_${file.size}_${file.lastModified}; if (!existingKeys.has(key)) { selectedFiles.push(file); existingKeys.add(key); } }); // 清空 input保证下次选同一个文件还能触发 change e.target.value ; renderList(); }这里有两个细节值得说。第一去重的 key 用name size lastModified组合比单纯用name靠谱因为不同文件可能重名。第二处理完后把e.target.value清空这样用户下次选同一个文件时change事件还能触发——否则浏览器会认为文件没变不触发事件。5.3 删除逻辑与 FileList 同步删除就是普通的数组splice但如果你还想让 input 的FileList保持同步比如某些场景下需要 input 参与原生提交就要用DataTransfer重建function removeFile(index) { selectedFiles.splice(index, 1); syncInputFiles(); renderList(); } function syncInputFiles() { const dt new DataTransfer(); selectedFiles.forEach(file dt.items.add(file)); fileInput.value.files dt.files; }如果你走的是方案二手动组装 FormDatasyncInputFiles这步可以省掉因为提交根本不读 input。5.4 提交时的 FormData 组装async function submit() { if (selectedFiles.length 0) { alert(请至少选择一个文件); return; } const formData new FormData(); formData.append(title, title); formData.append(description, description); selectedFiles.forEach(file { formData.append(files, file); }); const res await fetch(/api/upload, { method: POST, body: formData }); // 处理响应 }注意formData.append(files, file)里的files是后端接收的字段名多个文件用同一个字段名 append后端就能拿到一个数组。这一点要和后端约定好有的后端期望files[]有的期望files别搞错了。5.5 提交后重置状态提交成功后记得把selectedFiles清空input 也清空selectedFiles []; fileInput.value.value ; renderList();如果不清 input 的 value用户再次选同一个文件可能不触发 change。这个细节很多人会忘。6. 常见问题与排查速查表6.1 问题速查表现象可能原因解决方向删除后提交文件还在提交读的是 input 的 FileList改用手动组装 FormDatainput.files.splice报错FileList 没有数组方法用普通数组维护或 DataTransfer 重建input.files array无效只能赋值 FileList用DataTransfer.files删除后页面没更新渲染数组和 FileList 不同步统一数据源删除后重新渲染重复选同一文件不触发 changeinput value 未清空处理后e.target.value 组件库删除后提交仍有文件提交走了组件内部 input从 fileList 取 raw 手动组装后端收到的文件数量不对append 字段名不一致和后端确认字段名6.2 几个容易忽略的坑坑一DataTransfer构造后 items 为空。有些浏览器在new DataTransfer()之后items需要先 add 才能用直接读dt.files是空的。这是正常的add 完再读就行。坑二File对象的lastModified在某些场景下不稳定。比如从剪贴板粘贴的文件lastModified可能是当前时间。去重时如果发现异常可以退化成只用name size。坑三大文件场景下不要频繁重建 DataTransfer。每次删除都重建一次如果文件很多很大会有性能开销。可以做个防抖或者只在提交前同步一次。坑四FormData里 append 的 File 对象如果被后续操作修改了引用可能出问题。一般不会但如果你在 append 之后又去改selectedFiles要注意FormData里存的是引用还是拷贝。实测下来append之后FormData会持有文件的引用所以提交前不要再动数组。6.3 一个实用的调试技巧如果你不确定提交时到底带了哪些文件可以在发请求前打印一下for (const [key, value] of formData.entries()) { if (value instanceof File) { console.log(key, value.name, value.size); } else { console.log(key, value); } }这样能清楚看到FormData里实际有哪些字段和文件比在 Network 面板里翻要直观。我排查这类问题时基本都靠这一招几秒钟就能定位是数据源的问题还是提交的问题。7. 我个人的几点实操体会做过多文件上传之后我现在的习惯是永远不依赖 input 的 FileList 作为数据源。input 只负责触发选择事件选完之后立刻把文件转成普通数组后续所有增删改查都在这个数组上做提交时手动组装FormData。这样虽然多写几行代码但逻辑清晰不会出现页面删了、提交还在这种诡异问题。另外DataTransfer这个方案虽然正统但实际项目里我用得不多因为它解决的是让 input 的 FileList 和我的数组同步这个问题而如果我压根不走原生表单提交这个问题就不存在。所以选方案的时候先问自己一句我到底走不走原生表单序列化不走的话方案二最省事。最后提一个容易被忽略的点删除文件时最好给用户一个确认尤其是文件比较大的时候。用户误删一个大文件重新选一遍很烦。这个不算技术问题但体验上差别很大。
