如何通过Ajax POST请求上传任意数量的文件及关联数据？

要实现批量上传带fileName、fileId这类关联数据的文件，核心是用**FormData对象**——它专门用来处理包含文件的表单数据，能同时携带普通字段和文件资源。下面是完整的实现步骤：

1. 先修正你的数据格式 #

首先注意你的示例数据语法有误，对象属性应该用冒号:而不是等号=，修正后的数据示例：

const filesData = [
  { 
    fileName: "test1", 
    fileId: 1, 
    file: document.getElementById('fileToUpload').files[0] 
  },
  { 
    fileName: "test2", 
    fileId: 2, 
    file: document.getElementById('fileToUpload').files[0] 
  }
];

2. 构建FormData对象 #

我们需要把每个文件的关联数据和文件本身对应添加到FormData里，建议给每个文件组加上索引标识，方便后端区分不同的文件条目：

const formData = new FormData();

// 遍历每个文件数据，逐个添加到FormData
filesData.forEach((item, index) => {
  // 添加关联元数据
  formData.append(`files[${index}][fileName]`, item.fileName);
  formData.append(`files[${index}][fileId]`, item.fileId);
  // 添加文件本身
  formData.append(`files[${index}][file]`, item.file);
});

3. 发送Ajax请求 #

这里提供两种常用的实现方式：原生XMLHttpRequest和现代的fetch API

方式一：原生XMLHttpRequest #

const xhr = new XMLHttpRequest();
xhr.open('POST', '/your-server-endpoint', true);

// 监听请求状态变化
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功，处理响应
    console.log('上传成功:', xhr.responseText);
  } else {
    // 请求失败
    console.error('上传失败:', xhr.statusText);
  }
};

// 监听上传进度（可选）
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${Math.round(percentComplete)}%`);
  }
};

// 发送请求
xhr.send(formData);

方式二：Fetch API（更简洁） #

fetch('/your-server-endpoint', {
  method: 'POST',
  body: formData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json(); // 假设后端返回JSON格式响应
})
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

4. 后端解析提示 #

后端需要根据你FormData的结构来解析数据，举两个常见后端的例子：

PHP示例 #

// 获取所有文件组数据
$filesData = $_POST['files'];
// 获取上传的文件
$uploadedFiles = $_FILES['files'];

// 遍历处理每个文件
foreach ($filesData as $index => $item) {
  $fileName = $item['fileName'];
  $fileId = $item['fileId'];
  $file = $uploadedFiles['file'][$index];
  
  // 这里可以添加文件保存逻辑
}

Node.js（Express + multer）示例 #

首先安装multer中间件：npm install multer

const express = require('express');
const multer = require('multer');
const app = express();

// 配置multer，指定文件存储路径
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  }
});
const upload = multer({ storage: storage });

// 处理上传请求，注意这里的字段名要和前端对应
app.post('/your-server-endpoint', upload.array('files[0][file]', 10), (req, res) => {
  // 获取元数据
  const filesData = req.body.files;
  // 获取上传的文件
  const uploadedFiles = req.files;
  
  // 处理逻辑...
  res.json({ status: 'success', message: '文件上传完成' });
});

关键注意事项 #

• 不要手动设置Content-Type请求头，FormData会自动生成正确的multipart/form-data类型及边界标识，手动设置反而会导致解析失败。
• 确保你的服务器端支持multipart/form-data类型的请求解析。
• 如果使用jQuery的$.ajax，需要额外设置两个参数：processData: false和contentType: false，否则jQuery会自动处理FormData导致错误。

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