如何在Nuxt 3 Server API中实现文件上传？

当前你的代码使用readBody方法只能解析JSON或urlencoded格式的请求体，而文件上传采用的是multipart/form-data格式，因此无法正确获取到上传的文件。你需要改用h3提供的readMultipartFormData方法来处理文件上传请求，修改后的代码如下：

import { readMultipartFormData } from 'h3'

export default defineEventHandler(async (event) => {
  // 解析multipart格式的表单数据
  const formData = await readMultipartFormData(event)

  if (!formData) {
    return { status: 'error', message: '未接收到表单数据' }
  }

  // 根据前端上传的字段名查找文件（这里假设字段名为avatar）
  const fileItem = formData.find(item => item.name === 'avatar')

  if (!fileItem) {
    return { status: 'error', message: '未找到上传的文件' }
  }

  // 提取文件相关信息
  const fileInfo = {
    filename: fileItem.filename,
    contentType: fileItem.type,
    size: fileItem.data.length,
    // fileItem.data 是文件的二进制Buffer，可用于保存到服务器或云存储
  }

  return { status: 'success', data: fileInfo }
})

关键说明 #

• readMultipartFormData会将请求体解析为表单项数组，每个项包含name（字段名）、filename（文件名）、type（文件MIME类型）、data（文件二进制Buffer）
• 需要根据前端实际使用的文件上传字段名替换代码中的avatar
• 如果需要将文件保存到服务器，可以使用Node.js的fs模块将fileItem.data写入到指定路径

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