Nuxt 3 中上传文件后 Public 目录无法访问的问题及解决方案-js教程-PHP中文网

Nuxt 3 中上传文件后 Public 目录无法访问的问题及解决方案

心靈之曲

发布： 2025-08-21 19:12:46

原创

489人浏览过

nuxt 3 中上传文件后 public 目录无法访问的问题及解决方案

在 Nuxt 3 项目中，将用户上传的文件直接存储到 public 目录并期望通过静态资源服务器直接访问，在开发环境下（yarn dev）可能可行，但在构建部署后（yarn build）却经常遇到 404 错误。这是因为 public 目录主要用于存放静态资源，例如图片、字体、favicon 等，这些资源在构建时会被处理并优化，而动态生成的文件可能不会被正确包含。

问题分析

Nuxt 3 的 public 目录的设计初衷是存放静态资源，这些资源在构建过程中会被静态资源处理器处理，例如优化、压缩等。对于动态生成的文件，例如用户上传的图片，Nuxt 3 默认不会将其视为静态资源进行处理。因此，在构建后，这些文件可能无法被正确访问。

此外，直接将用户上传的文件暴露在 public 目录下也存在安全风险。例如，恶意用户可能会上传包含恶意代码的文件，并通过 URL 直接访问执行。

解决方案：构建 API 端点

更安全和可靠的解决方案是构建一个 API 端点来提供文件访问服务。这样可以对文件访问进行权限控制，并避免直接暴露 public 目录。

步骤 1：创建 API 端点

在 server/api 目录下创建一个 API 端点，例如 server/api/files/[filename].ts。

import { defineEventHandler, readParams } from 'h3'
import fs from 'node:fs'
import path from 'node:path'

export default defineEventHandler((event) => {
  const { filename } = readParams(event)

  // 假设文件存储在 public/uploads 目录下
  const filePath = path.join('public/uploads', filename)

  try {
    // 检查文件是否存在
    if (!fs.existsSync(filePath)) {
      throw new Error('File not found')
    }

    // 读取文件内容
    const fileContent = fs.readFileSync(filePath)

    // 设置响应头
    event.node.res.setHeader('Content-Type', 'image/jpeg') // 根据文件类型设置
    event.node.res.setHeader('Cache-Control', 'public, max-age=31536000') // 设置缓存

    // 返回文件内容
    return fileContent
  } catch (error: any) {
    console.error(error)
    throw createError({
      statusCode: 404,
      statusMessage: 'File Not Found',
    })
  }
})

登录后复制

步骤 2：创建 uploads 目录