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. 修改上传逻辑
简灰服装商城整站 For SHOPEX
下载
SHOPEX简灰服装商城整站源码下载。 安装方法:1.解压上传程序至网站根目录.. 访问:域名/bak.(用户名:admin 密码:123456)2.进入帝国备份王后,配置数据库数据库信息.选择-www.taomoban.net目录.还原数据库.3.修改FTP目录下的config/config.phpphp 数据库连接信息.4.登陆网站后台--清空缓存..5.删除bak文件夹 后台:shopadm
修改文件上传逻辑，将文件存储到 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 接口访问上传的文件。
@@##@@
注意事项：
- 确保 public/uploads 目录存在，如果不存在，需要手动创建。
- 根据实际情况修改 Content-Type。
- 为了安全起见，可以对上传的文件名进行校验和过滤，防止恶意文件上传。
- 可以考虑使用更专业的对象存储服务，例如阿里云 OSS、腾讯云 COS 等，来存储用户上传的文件。
总结：
通过构建 API 接口来提供文件服务，可以有效地解决 Nuxt 3 项目中上传文件后 public 目录无法访问的问题。这种方式更加灵活，可以更好地控制文件的访问权限和处理方式。虽然需要额外编写 API 接口，但从长远来看，这种方案更加可靠和可维护。
