Nuxt3使用useFetch上传文件，服务端pimage为空对象的问题

问题核心在于：直接发送普通JS对象无法正确序列化File类型，而直接使用FormData.append数组会被转为字符串。需要手动构造FormData并正确处理数组字段，同时让后端能解析出数组结构。

步骤1：编写FormData构造函数 #

遍历表单数据，针对不同类型字段做特殊处理：

• 数组字段：用字段名[]作为键，逐个append数组元素（Django Rest会自动解析为数组）
• 文件字段：直接append File对象
• 普通字段：正常append非undefined值

const buildFormData = (data) => {
  const formData = new FormData();
  Object.entries(data).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      value.forEach(item => {
        formData.append(`${key}[]`, item);
      });
    } else if (value instanceof File) {
      formData.append(key, value);
    } else {
      if (value !== undefined) {
        formData.append(key, value);
      }
    }
  });
  return formData;
};

步骤2：修改useFetch请求 #

用构造好的FormData作为请求体，不要手动设置Content-Type，浏览器会自动添加正确的multipart/form-data及边界标识：

const { data } = await useFetch('apiurl/create/', { 
  method: 'post', 
  body: buildFormData(formData.value)
  // 若后端需要认证头（如Authorization），可在此添加headers，无需Content-Type
})

后端验证 #

Django Rest Framework的序列化器（如ModelSerializer）会自动识别categories[]格式的参数，将其解析为数组，只要你的serializer中categories字段定义为ListField或对应关系字段（如PrimaryKeyRelatedField(many=True)）即可正常接收。

问题原因说明 #

• 直接发送JS对象：JSON.stringify无法序列化File对象，会将其转为{}，导致后端接收不到文件
• 直接append数组：FormData仅支持字符串/Blob/File类型值，数组会被调用toString()转为逗号分隔的字符串，后端只能拿到字符串而非数组

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