GraphQL多图上传：后端无法显示图片数组问题求助

你的代码存在几个关键问题，导致后端无法识别图片数组： #

1. Operations语法错误
   你在operations的JSON里错误地给query字段加了savePostImage:前缀，这会导致JSON解析失败，正确的mutation字符串应该直接赋值给query。

2. 嵌套重复的for循环
   外层和内层循环用了同一个变量i，这会导致循环逻辑混乱，外层循环完全被内层覆盖，实际只会重复处理最后一次循环的内容。

3. Map格式与文件Key错误

   • 初始设置的map值是queryVariables.image，这不符合GraphQL文件上传的map规范，map需要定义文件到变量的映射关系。
   • 所有文件都用同一个file作为Key，后端无法区分多个文件；同时每次append的map会覆盖之前的，应该一次性生成完整的map，而不是循环追加。
   • 文件对应的变量路径应该是variables.image[0]、variables.image[1]这种数组索引格式，而不是variables.image.0。

修正后的代码： #

let bodyFormData = new FormData();
let objects = Object.values(queryVariables.image);

// 修正operations的语法，去掉多余的savePostImage:前缀
bodyFormData.set('operations', JSON.stringify({
  query: `mutation savePostImage($image: [Upload!]) {
    savePostImage(image: $image) {
        error,
        message
    }
}`,
  variables: { image: objects.map(() => null) } // 用null作为Upload类型的占位符
}));

bodyFormData.set('operationName', 'savePostImage'); // 指定mutation名称，而非null

// 生成正确的map：每个文件对应variables.image的对应索引
const map = {};
objects.forEach((_, index) => {
  const fileKey = `file${index}`;
  map[fileKey] = [`variables.image[${index}]`];
  bodyFormData.append(fileKey, objects[index]);
});
bodyFormData.set('map', JSON.stringify(map));

关键修正点说明： #

• Operations里的variables：Upload类型的变量需要用null占位，因为实际文件会通过FormData的单独字段传递，由map来关联。
• Map的生成：为每个文件分配唯一的Key（如file0、file1），并映射到variables.image[index]，这样后端就能正确识别图片数组。
• OperationName：必须指定mutation的名称savePostImage，确保后端能匹配对应的操作。

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