求助：AJAX发送含File对象的JSON数组时JSON.stringify致图片丢失

直接用JSON.stringify无法处理File对象，会导致文件数据丢失；直接发送对象则会被转为[object Object]，解决方法是使用FormData来构建请求体，它专门用于处理包含文件的multipart请求。

方法一：保持原对象结构发送 #

遍历数组中的每个对象，将所有字段（包括File对象）逐个添加到FormData中，通过键名格式（如items[索引].字段名）保留原结构，方便后端解析：

// 假设你的目标数组为dataArray
const formData = new FormData();

dataArray.forEach((item, index) => {
  for (const key in item) {
    if (item.hasOwnProperty(key)) {
      const value = item[key];
      // 构建带索引的键名，确保后端识别数组结构
      const formKey = `items[${index}].${key}`;
      if (value instanceof File) {
        formData.append(formKey, value);
      } else {
        formData.append(formKey, value);
      }
    }
  }
});

// 发送AJAX请求（以fetch为例）
fetch('/你的接口地址', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(data => console.log('请求成功:', data))
.catch(err => console.error('请求失败:', err));

方法二：拆分JSON数据与文件发送 #

如果后端更倾向于分开接收结构化数据和文件，可以将非文件部分转为JSON字符串，文件单独添加到FormData：

const formData = new FormData();
// 提取数组中的非文件数据并转为JSON
const jsonPayload = dataArray.map(item => {
  const { imageMultipartFiles, ...rest } = item;
  return rest;
});
formData.append('payload', JSON.stringify(jsonPayload));

// 单独添加每个文件，用索引对应原数组位置
dataArray.forEach((item, index) => {
  formData.append(`files[${index}]`, item.imageMultipartFiles);
});

// 发送请求
fetch('/你的接口地址', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(data => console.log('请求成功:', data))
.catch(err => console.error('请求失败:', err));

注意事项 #

• 不要手动设置Content-Type头，浏览器会自动为FormData添加正确的multipart/form-data头及边界标识（boundary），手动设置可能导致解析失败。
• 后端需要对应处理multipart请求：比如Node.js用multer中间件，Java Spring用MultipartFile或@RequestPart注解，Python Django用request.FILES等。

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