Nuxt生产环境下文件上传至public目录失败问题求助

问题场景 #

开发环境下通过Node的fs/path模块上传文件到public目录完全正常，但生产环境中失效。改用Nitro的useStorage后，上传接口能返回文件路径，但访问该路径时出现404错误。

问题原因 #

1. 直接使用fs模块的问题：生产环境中Nuxt/Nitro的构建产物结构发生变化，process.cwd()指向的是Nitro的运行目录（如.output/server），而非项目根目录，导致写入的文件路径错误，文件并未存到正确的可访问目录。
2. useStorage配置的问题：默认的public目录在生产环境会被打包为静态资源，动态上传的文件不会被Nitro的静态服务自动识别，因此访问时返回404。

解决方案 #

方案1：修正fs模块的路径（快速调整，不推荐长期使用） #

通过Nitro提供的环境变量获取正确的public目录路径，确保生产环境下文件写入到正确位置：

import path from 'path'
import fs from 'fs'

export default defineEventHandler(async(event) => {
  const files = await readMultipartFormData(event)
  const uploadedFilePaths:string[] = []
  
  // 获取生产环境下正确的public目录路径
  const publicDir = process.env.NITRO_PUBLIC_DIR || path.join(process.cwd(), 'public')
  
  files?.forEach((file) => {
    const filePath = path.join(publicDir, file.filename as string)
    // 确保父目录存在，避免写入失败
    fs.mkdirSync(path.dirname(filePath), { recursive: true })
    fs.writeFileSync(filePath, file.data)
    uploadedFilePaths.push(`/${file.filename}`)
  })
  return uploadedFilePaths
})

方案2：useStorage + publicAssets配置（推荐） #

创建独立的上传目录，配置Nitro将该目录作为静态资源服务，避免与打包后的public目录冲突：

1. 修改nuxt.config.ts：

export default defineNuxtConfig({
  devtools: true,
  nitro: {
    storage: {
      uploads: {
        driver: 'fs',
        base: './uploads' // 独立的上传存储目录
      }
    },
    // 配置Nitro将uploads目录作为静态资源对外提供
    publicAssets: [
      {
        baseURL: '/uploads',
        dir: './uploads',
        maxAge: 60 * 60 * 24 * 7 // 可选：设置静态文件缓存时间
      }
    ]
  }
});

2. 修改上传API文件~/server/api/upload.post.ts：

export default defineEventHandler(async (event) => {
  const files = await readMultipartFormData(event)
  const uploadFilePaths:string[] = []
  
  for (const file of files || []) {
    // 使用自定义的uploads存储驱动写入文件
    await useStorage('uploads').setItemRaw(file.filename, file.data)
    // 拼接正确的可访问路径
    uploadFilePaths.push(`${getRequestURL(event).origin}/uploads/${file.filename}`)
  }
  
  return uploadFilePaths
});

额外注意事项 #

• 生产环境部署时，需确保uploads目录存在，可在代码中添加目录初始化逻辑（如fs.mkdirSync('./uploads', { recursive: true })）。
• 避免上传到默认public目录：该目录在构建时会被打包，动态上传的文件不会被版本控制，且重新部署时可能被覆盖。
• 云平台部署（如Vercel、Netlify）时，本地文件系统存储可能不持久，建议改用云存储服务（如S3、Cloudinary）替代本地存储。

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