如何通过Nuxt 3服务端向Strapi上传图片？

你的问题出在服务端路由处理readMultipartFormData返回文件对象的方式上——直接将整个文件对象追加到FormData里，Strapi无法识别正确的文件格式。以下是修正后的实现方案：

修正服务端路由（server/api/post.js） #

Node.js环境下的FormData需要明确传入文件的Buffer数据、文件名和内容类型，而非直接传入readMultipartFormData返回的对象。修改后的代码如下：

// server/api/post.js
export default defineEventHandler(async (event) => {
  const files = await readMultipartFormData(event);
  if (!files?.length) {
    throw createError({ statusCode: 400, message: "No files uploaded" });
  }

  const file = files[0];
  const formData = new FormData();
  
  // 正确构造文件项：传入Buffer数据，指定文件名和内容类型
  formData.append("files", file.data, {
    filename: file.filename,
    contentType: file.type
  });

  return await $fetch(`${config.public.api.url}/api/upload`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.API_TOKEN}`,
      // 不要手动设置Content-Type，$fetch会自动生成带boundary的正确multipart头
    },
    body: formData,
  });
});

客户端调用保持不变 #

你的客户端代码无需修改，继续使用FormData上传即可：

let formData = new FormData();
formData.append("files", files[0]);

const res: any = await $fetch("/api/post", {
  method: "POST",
  body: formData,
});

关键注意事项 #

• 禁止手动设置Content-Type：$fetch会根据FormData自动生成包含boundary的请求头，手动设置会导致格式错误。
• 必须传递filename和contentType：这两个参数是Strapi识别文件类型、保存文件名的必要条件。
• 增加基础错误处理：避免因无文件上传导致的程序崩溃。

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