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

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

花韻仙語

发布： 2025-08-21 17:32:19

原创

316人浏览过

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>
  <img :src="imageUrl" alt="Uploaded Image">
</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>

登录后复制

注意事项：