Nuxt 3 上传文件后 Public 目录无法访问的解决方案-小浪学习网

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

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 接口访问上传的文件。

<template>   @@##@@ </template>  <script setup> import { ref, onMounted } from 'vue';  const filename = ref(''); const imageUrl = ref('');  onMounted(async () => {   // 假设你已经获取到了上传后的文件名   filename.value = '1678886400000-example.png'; // 替换为实际的文件名   imageUrl.value = `/api/files/${filename.value}`; }); </script>

注意事项：