因为 input.files 是只读 filelist，直接清空无效；应使用 map 管理文件状态，存原始 file 并同步增删，提交时遍历 map 构造 formdata。
为什么直接清空 input.files 不起作用
因为 HTMLInputElement.files 是只读的 FileList 对象，任何对它的修改（比如 files.length = 0 或 files.splice()）都会被浏览器忽略。调用 input.value = "" 虽然能清空整个列表，但会丢失所有已选文件——这在多图预览+局部删除场景下完全不可接受。
用 Map 管理文件状态才是可靠方案
你需要一个独立于 DOM 的状态容器，显式记录用户“当前保留哪些文件”。Map 比数组更合适，因为：
- 支持用唯一 key（如
`id${file.lastModified}${file.size}`）精准定位单个文件 -
delete()可移除某一项而不影响其余项 - 遍历时可还原原始顺序，避免索引错位
示例关键逻辑：
const uploadedFiles = new Map(); // 存储 { id → { name, size, type, src } }
// 文件选择后
input.addEventListener('change', e => {
Array.from(e.target.files).forEach(file => {
const id = `id${file.lastModified}${file.size}`;
const reader = new FileReader();
reader.onload = () => {
uploadedFiles.set(id, {
name: file.name,
size: file.size,
type: file.type,
src: reader.result
});
renderPreview(); // 重新渲染缩略图列表
};
reader.readAsDataURL(file);
});
input.value = ""; // 清空 input，防重复触发
});
删除预览图时必须同步更新 Map 和 DOM
点击缩略图上的删除按钮，不能只删 DOM 元素，否则提交时仍会把已删文件发出去。必须：
- 从
uploadedFiles中delete()对应 id - 再调用
renderPreview()全量重绘列表（基于当前Map的键值对） - 如果用了
data-id绑定，确保按钮事件能拿到该 id，例如：button.dataset.id
错误做法：previewElement.remove() 后不碰 Map —— 这会导致 uploadedFiles 里残留无效项，后续 FormData.append() 时仍会提交已删文件。
提交前从 Map 构造 FormData 而非依赖 input.files
表单提交时，别再读 input.files。正确路径是遍历 uploadedFiles.values()，逐个 append 到 FormData：
function submitUpload() {
const formData = new FormData();
for (const fileObj of uploadedFiles.values()) {
// 注意：这里需要的是 File 实例，不是 data URL
// 所以你得在 Map 里存原始 File，或用其他方式重建（如用 Blob）
// 常见做法是在 change 事件中先缓存 File 引用，而非仅存 data URL
}
// 发送 formData...
}
真正容易被忽略的一点：很多实现只存了 src（data URL），却丢了原始 File 对象。上传必须用 File 或 Blob，data URL 是字符串，后端收不到二进制内容。所以 Map 里最好直接存 file，或配合 URL.createObjectURL() + 显式 revoke 控制内存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
