通过Ajax与FormData上传文件为何出现重复？技术求助

嘿，我来帮你捋清楚这个文件重复上传的问题～

从你给出的代码片段来看，核心原因是你重复向FormData中添加了同一个文件：

• 当你执行formData = new FormData(formElement);时，这个构造函数会自动把表单（#form）里的所有表单字段（包括你的文件输入框#file里的文件）都添加到FormData对象中。
• 但你后面又去获取fileInput的files集合，准备循环添加文件（虽然代码没写完，但推测是类似formData.append('file', files[i])的操作），这就导致同一个文件被添加了两次——一次是FormData自动抓取的，一次是你手动添加的，最终上传时就会出现重复文件。

两种解决办法： #

办法一：直接使用表单生成的FormData（推荐） #

既然你已经通过表单元素创建了FormData，它已经包含了所有表单数据（包括文件），那就不需要再手动添加文件了，直接用这个FormData发起请求就行：

var button = document.querySelector('#send');
document.querySelector('#send').addEventListener('click', sendForm, false);

function sendForm(e) {
  e.preventDefault();
  var formElement = document.querySelector('#form');
  var formData = new FormData(formElement);
  var xhr = new XMLHttpRequest();

  // 配置并发送请求
  xhr.open('POST', '你的上传接口地址', true);
  xhr.onload = function() {
    // 处理响应
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.log('上传失败');
    }
  };
  xhr.send(formData);
}

办法二：手动构建FormData（适合需要自定义字段的场景） #

如果你需要手动控制要上传的内容（比如只传特定文件、修改字段名），可以创建空的FormData，再手动添加需要的字段和文件，不要传入表单元素：

var button = document.querySelector('#send');
document.querySelector('#send').addEventListener('click', sendForm, false);

function sendForm(e) {
  e.preventDefault();
  var formData = new FormData();
  var fileInput = document.querySelector('#file');
  var files = fileInput.files;

  // 手动添加文件
  for (var i = 0; i < files.length; i++) {
    formData.append('custom_file', files[i]); // 这里可以自定义字段名
  }
  // 还可以添加其他表单字段，比如input的value
  formData.append('username', document.querySelector('#username').value);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '你的上传接口地址', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.log('上传失败');
    }
  };
  xhr.send(formData);
}

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