如何在for循环中定义键以删除FormData中的file[]项？

你遇到的核心问题是：FormData.delete(key) 会删除该键名下的所有值，而非单个值。因为你用formData.append("file[]", file)多次添加文件时，这些文件都存在同一个file[]键下，直接调用delete("file[]")会把所有上传的文件都删掉，这就是修改后POST请求没有文件的原因。另外原代码里的key未定义，自然会抛出ReferenceError。

正确解决方案：维护独立的文件数组 #

由于FormData本身没有提供删除单个值的API，我们需要自己维护一个文件数组来跟踪所有上传的文件，删除时先修改数组，再重新构建FormData。

完整代码示例：

const formData = new FormData();
// 新增数组存储上传的文件，作为唯一数据源
const uploadedFiles = [];

dropZone.addEventListener("drop", (event) => {
  event.preventDefault(); // 阻止浏览器默认打开文件的行为
  for (const file of event.dataTransfer.files) {
    uploadedFiles.push(file);
    const listItem = document.createElement("li");
    listItem.textContent = file.name + "  ";
    // 给列表项绑定文件标识，方便删除时匹配对应项
    listItem.dataset.fileName = file.name;
    
    const deleteButton = document.createElement("button");
    deleteButton.classList.add("button", "button-small");
    deleteButton.textContent = " Remove";
    deleteButton.addEventListener("click", () => {
      // 从数组中移除对应文件
      const targetIndex = uploadedFiles.findIndex(f => f.name === listItem.dataset.fileName);
      if (targetIndex !== -1) {
        uploadedFiles.splice(targetIndex, 1);
      }
      // 重新构建FormData：先清空旧值，再追加剩余文件
      formData.delete("file[]");
      uploadedFiles.forEach(file => {
        formData.append("file[]", file);
      });
      listItem.remove();
    });
    listItem.appendChild(deleteButton);
    filesList.appendChild(listItem);
  }
});

关键说明： #

• 用uploadedFiles数组作为上传文件的唯一数据源，替代直接依赖FormData
• 删除时通过文件名（或更可靠的文件对象引用）定位数组中的目标项并移除
• 每次删除后，先清空FormData中file[]键的所有值，再将数组剩余文件重新追加到FormData中
• 必须在drop事件中调用event.preventDefault()，否则浏览器会默认打开拖入的文件

这样就能实现单个文件的删除，同时保证FormData中只保留剩余文件，POST请求可正常提交。

内容的提问来源于stack exchange，提问作者heggie