在 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 目录
在 public 目录下创建一个 uploads 目录，用于存放用户上传的文件。
步骤 3：更新文件上传逻辑
更新文件上传的逻辑，将文件存储到 public/uploads 目录下。
步骤 4：访问文件
使用 API 端点访问文件，例如 /api/files/example.jpg。
代码解释
defineEventHandler：定义一个 API 端点处理函数。readParams：读取 URL 参数，例如文件名。fs.readFileSync：同步读取文件内容。event.node.res.setHeader：设置响应头，例如 Content-Type 和 Cache-Control。createError：创建错误响应。
注意事项
需要根据实际的文件类型设置 Content-Type。可以根据需要添加权限控制逻辑，例如验证用户身份。建议使用更安全的文件存储方案，例如云存储服务（AWS S3, Azure Blob Storage, Google Cloud Storage）。确保 public/uploads 目录存在，并且服务器进程有权限读取该目录。如果需要支持多种文件类型，需要根据文件扩展名动态设置 Content-Type。
总结
通过构建 API 端点，我们可以安全地提供用户上传文件的访问服务，避免直接暴露 public 目录，并可以灵活地控制文件访问权限。虽然增加了代码复杂度，但提升了安全性和可维护性。对于生产环境，建议使用云存储服务来存储用户上传的文件，以获得更好的性能和可靠性。
以上就是Nuxt 3 中上传文件后 Public 目录无法访问的问题及解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516863.html
微信扫一扫 
支付宝扫一扫 
