使用 Nuxt 3 提供用户上传的文件：构建 API 端点-小浪学习网

使用 Nuxt 3 提供用户上传的文件：构建 API 端点

本文档旨在解决 Nuxt 3 应用中用户上传文件后，无法直接通过 public 目录访问的问题。我们将探讨 public 目录的特性，并提供构建 API 端点来安全有效地提供这些文件的解决方案。

在 Nuxt 3 应用中，public 目录主要用于存放静态资源，例如 favicon.ico、图片等。这些资源在构建时会被复制到最终的 dist 目录，并通过服务器直接提供。然而，public 目录的设计初衷并非用于动态存储用户上传的文件，因此在构建后，对该目录的修改可能不会生效。也就是说，即使你在开发环境（yarn dev）中可以访问上传的文件，在构建后（yarn build）也可能无法访问，出现 404 错误。

问题分析：

public 目录的静态资源特性决定了它不适合动态存储用户上传的文件。Nuxt 3 在构建时会优化静态资源，并且期望这些资源在构建后保持不变。因此，动态添加或修改 public 目录下的文件，可能导致构建后的应用无法正确提供这些文件。

解决方案：构建 API 端点

为了解决这个问题，最佳实践是构建一个 API 端点来提供用户上传的文件。这种方法不仅可以确保文件能够被正确访问，还可以提供额外的安全性和控制。

实现步骤：

选择存储位置： 首先，确定用户上传的文件存储在哪里。一个常见的选择是在项目根目录下创建一个名为 uploads 的文件夹（或者其他任何你喜欢的名字）。确保将此文件夹添加到 .gitignore 文件中，以避免将其提交到版本控制系统。
```
mkdir uploads echo "uploads/" >> .gitignore
```

创建 API 路由： 在 server/api 目录下创建一个新的 API 路由，例如 server/api/files/[filename].ts。这个路由将负责处理文件请求。

// server/api/files/[filename].ts import { defineEventHandler, readParams, sendStream, createError } from 'h3' import path from 'path' import fs from 'fs'  export default defineEventHandler(async (event) => {   const { filename } = readParams(event)    if (!filename) {     throw createError({ statusCode: 400, statusMessage: 'Filename is required' })   }    const filePath = path.join(process.cwd(), 'uploads', filename)    if (!fs.existsSync(filePath)) {     throw createError({ statusCode: 404, statusMessage: 'File not found' })   }    const fileStream = fs.createReadStream(filePath)    return sendStream(event, fileStream) })

代码解释：

defineEventHandler：定义一个处理 http 请求的函数。
readParams：从请求参数中读取文件名。
sendStream：将文件流发送到客户端。
createError：创建 HTTP 错误响应。
path.join：构建文件的完整路径。
fs.existsSync：检查文件是否存在。
fs.createReadStream：创建一个可读的文件流。

更新上传逻辑： 修改文件上传的逻辑，将文件保存到 uploads 目录，并记录文件的名称。

// 示例：假设你使用 <input type="file"> 元素上传文件 async function uploadFile(file: File) {   const formData = new FormData();   formData.append('file', file);    const response = await fetch('/api/upload', { // 假设你有一个 /api/upload 路由处理上传     method: 'POST',     body: formData   });    if (response.ok) {     const data = await response.json();     return data.filename; // 假设 API 返回文件名   } else {     throw new Error('File upload failed');   } }  // server/api/upload.ts (示例) import { defineEventHandler, readMultipartFormData } from 'h3' import fs from 'fs' import path from 'path'  export default defineEventHandler(async (event) => {   const formData = await readMultipartFormData(event)    if (!formData) {     return { error: 'No file uploaded' }   }    const fileData = formData.find(item => item.name === 'file')    if (!fileData || !fileData.data || !fileData.filename) {     return { error: 'Invalid file data' }   }    const filename = Date.now() + '-' + fileData.filename // 加上时间戳避免重名   const filePath = path.join(process.cwd(), 'uploads', filename)    fs.writeFileSync(filePath, fileData.data)    return { filename } })