Nuxt 3 项目中，将用户上传的文件直接存储在 public 目录下，期望构建后可以直接通过 URL 访问，但实际情况是，虽然 favicon.ico 等静态资源可以正常访问，新上传的文件却会报 404 错误。这是因为 Nuxt 3 对 public 目录的处理方式有所不同，它更倾向于将 public 目录视为静态资源目录，不期望其中的内容在运行时发生变化。
解决方案：构建 API 接口提供文件服务
为了解决这个问题，我们可以构建一个 API 接口来提供文件服务，而不是直接让 Nuxt 服务 public 目录下的文件。
1. 创建 API 路由
在 server/api 目录下创建一个 API 路由，例如 server/api/files/[filename].ts。
import { defineEventHandler } from 'h3'import fs from 'node:fs'import path from 'node:path'export default defineEventHandler((event) => { const filename = event.context.params?.filename const filePath = path.join('public', 'uploads', filename || '') // 假设文件存储在 public/uploads 目录下 if (!filename || !fs.existsSync(filePath)) { throw createError({ statusCode: 404, statusMessage: 'File not found', }) } const file = fs.readFileSync(filePath) setHeaders(event, { 'Content-Type': 'image/png', // 根据文件类型设置 Content-Type }) return file})
代码解释：
defineEventHandler：定义一个 H3 事件处理函数，用于处理 API 请求。event.context.params?.filename：获取路由参数中的文件名。path.join(‘public’, ‘uploads’, filename || ”)：构建文件的完整路径。这里假设文件存储在 public/uploads 目录下，你需要根据实际情况修改。fs.existsSync(filePath)：检查文件是否存在。createError：如果文件不存在，抛出一个 404 错误。fs.readFileSync(filePath)：读取文件内容。setHeaders：设置响应头，包括 Content-Type，你需要根据文件类型设置正确的 Content-Type。return file：返回文件内容。
2. 修改上传逻辑
修改文件上传逻辑，将文件存储到 public/uploads 目录下。
// 示例代码，需要根据你的实际上传逻辑进行修改async function handleFileUpload(file: File) { const filename = `${Date.now()}-${file.name}`; const filePath = path.join('public', 'uploads', filename); const buffer = await file.arrayBuffer(); const fileData = new Uint8Array(buffer); fs.writeFileSync(filePath, fileData); return filename; // 返回文件名，用于后续访问}
3. 前端访问文件
使用 API 接口访问上传的文件。
import { ref, onMounted } from 'vue';const filename = ref('');const imageUrl = ref('');onMounted(async () => { // 假设你已经获取到了上传后的文件名 filename.value = '1678886400000-example.png'; // 替换为实际的文件名 imageUrl.value = `/api/files/${filename.value}`;});
注意事项：
确保 public/uploads 目录存在，如果不存在，需要手动创建。根据实际情况修改 Content-Type。为了安全起见，可以对上传的文件名进行校验和过滤，防止恶意文件上传。可以考虑使用更专业的对象存储服务，例如阿里云 OSS、腾讯云 COS 等，来存储用户上传的文件。
总结：
通过构建 API 接口来提供文件服务，可以有效地解决 Nuxt 3 项目中上传文件后 public 目录无法访问的问题。这种方式更加灵活，可以更好地控制文件的访问权限和处理方式。虽然需要额外编写 API 接口，但从长远来看，这种方案更加可靠和可维护。
以上就是Nuxt 3 上传文件后 Public 目录无法访问的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/99814.html
微信扫一扫 
支付宝扫一扫 
