Nuxt3中multer-S3通过formData传图片至AWS S3无响应问题排查

核心问题分析 #

你的代码无响应的主要原因在服务端的imgUploader.ts，存在两处关键错误：

1. 语法错误：uploadToStorage.single('image'), (res: any, req:any) => {} 中的逗号完全错误，导致multer中间件根本没有被执行，也没有正确处理请求和返回响应。
2. Nuxt3的defineEventHandler是异步函数，而multer是基于回调的Express中间件，需要手动封装为Promise才能正确等待上传完成。

修复后的代码 #

1. 服务端：imgUploader.ts #

import { uploadToStorage } from "../api/upload"

export default defineEventHandler(async (event) => {
    if (event.node.req.method === 'POST') {
        console.warn('req uploader apis')
        try {
            console.warn('upload')
            // 将multer的回调式中间件封装为Promise，等待上传完成
            await new Promise<void>((resolve, reject) => {
                uploadToStorage.single('image')(event.node.req, event.node.res, (err) => {
                    if (err) {
                        reject(err)
                    } else {
                        resolve()
                    }
                })
            })
            // 上传成功后返回响应
            return { result: 'ok' }
        } catch (e) {   
            console.warn(e)
            // 上传失败返回错误信息
            return { error: (e as Error).message }
        }
    }
})

2. 客户端：client.vue（可选优化） #

虽然客户端代码能运行，但可以优化useFetch的响应处理方式，避免直接访问_rawValue：

const handleFileChange = async () => {
  let formdata = new FormData()
  const getImg = image.value.files[0]
  formdata.append('image', getImg) // 简化写法
  try {
    const { data, error } = await useFetch('/api/imgUploader', {
      method: 'POST', 
      body: formdata 
    })
    if (error.value) throw error.value
    fileName.value = getImg.name
    console.log(data.value) // 直接访问ref的值
  } catch (e) {
    console.log('上传失败:', e)
  }
}

其他注意事项 #

• 确保你的AWS S3凭证、区域、Bucket名称配置正确（你提到Axios能正常上传，这部分应该没问题）。
• multer-s3的acl: 'public-read'需要确保Bucket的权限允许公共读取，否则上传后的文件可能无法访问。

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