编辑“︁Next.js 文件上传”︁（章节）

= Next.js 文件上传 =

文件上传是 Web 开发中的常见需求，Next.js 提供了多种方式来处理文件上传。本章节将详细介绍如何在 Next.js 应用中实现文件上传功能，包括客户端和服务端的处理方式。

== 简介 ==
文件上传允许用户将文件从本地计算机传输到服务器。在 Next.js 中，文件上传可以通过 HTML 的 `<input type="file">` 元素实现，并结合 API 路由（API Routes）或第三方库（如 `multer`）处理上传的文件。

Next.js 的文件上传功能可以用于多种场景，例如：
* 用户头像上传
* 文档或图片分享
* 多媒体内容管理

== 基本实现 ==
=== 客户端代码 ===
首先，创建一个简单的表单，允许用户选择并上传文件：

<syntaxhighlight lang="javascript">
// pages/upload.js
import { useState } from 'react';

export default function FileUpload() {
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [uploadStatus, setUploadStatus] = useState('');

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!file) return;

    setUploading(true);
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData,
      });
      const data = await response.json();
      setUploadStatus(data.message);
    } catch (error) {
      setUploadStatus('上传失败');
    } finally {
      setUploading(false);
    }
  };

  return (
    <div>
      <h1>文件上传</h1>
      <form onSubmit={handleSubmit}>
        <input type="file" onChange={handleFileChange} />
        <button type="submit" disabled={uploading}>
          {uploading ? '上传中...' : '上传'}
        </button>
      </form>
      {uploadStatus && <p>{uploadStatus}</p>}
    </div>
  );
}
</syntaxhighlight>

=== 服务端代码 ===
在 Next.js 的 API 路由中处理文件上传：

<syntaxhighlight lang="javascript">
// pages/api/upload.js
import fs from 'fs';
import path from 'path';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  try {
    const multer = require('multer');
    const upload = multer({ dest: 'uploads/' });

    upload.single('file')(req, {}, async (err) => {
      if (err) {
        return res.status(500).json({ message: '文件上传失败' });
      }

      const file = req.file;
      if (!file) {
        return res.status(400).json({ message: '没有上传文件' });
      }

      // 处理文件（例如移动到永久存储）
      const newPath = path.join(process.cwd(), 'public/uploads', file.originalname);
      fs.renameSync(file.path, newPath);

      res.status(200).json({ message: '文件上传成功' });
    });
  } catch (error) {
    res.status(500).json({ message: '服务器错误' });
  }
}
</syntaxhighlight>

== 进阶实现 ==
对于更复杂的场景，可能需要考虑以下方面：

=== 文件验证 ===
在服务端验证文件类型和大小：

<syntaxhighlight lang="javascript">
const upload = multer({
  dest: 'uploads/',
  limits: {
    fileSize: 5 * 1024 * 1024, // 5MB
  },
  fileFilter: (req, file, cb) => {
    const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'];
    if (!allowedTypes.includes(file.mimetype)) {
      return cb(new Error('不支持的文件类型'));
    }
    cb(null, true);
  },
});
</syntaxhighlight>

=== 进度显示 ===
使用 `axios` 显示上传进度：

<syntaxhighlight lang="javascript">
const [progress, setProgress] = useState(0);

const handleSubmit = async (e) => {
  e.preventDefault();
  if (!file) return;

  setUploading(true);
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await axios.post('/api/upload', formData, {
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        setProgress(percentCompleted);
      },
    });
    setUploadStatus(response.data.message);
  } catch (error) {
    setUploadStatus('上传失败');
  } finally {
    setUploading(false);
  }
};
</syntaxhighlight>

== 实际应用案例 ==
=== 用户头像上传 ===
1. 用户选择图片文件（JPG/PNG）
2. 前端验证文件大小（不超过2MB）
3. 上传到服务器
4. 服务器生成缩略图
5. 更新用户资料中的头像URL

=== 文档管理系统 ===
1. 用户上传PDF/DOC文件
2. 服务器存储文件并提取元数据
3. 将文件信息存入数据库
4. 提供文件下载和预览功能

== 安全注意事项 ==
* 始终在服务端验证文件类型
* 限制文件大小防止DoS攻击
* 对上传的文件进行病毒扫描
* 不要直接使用用户提供的文件名
* 考虑使用云存储服务（如AWS S3）而非本地存储

== 性能优化 ==
* 对大文件使用分块上传
* 使用CDN加速文件分发
* 考虑客户端压缩（如图片压缩）
* 实现断点续传功能

== 常见问题 ==
=== 为什么我的文件上传失败？ ===
可能原因：
* 文件大小超过限制
* 文件类型不被允许
* 服务器存储空间不足
* 网络连接问题

=== 如何测试文件上传功能？ ===
可以使用Postman或curl命令测试API：
<syntaxhighlight lang="bash">
curl -X POST -F "file=@test.jpg" http://localhost:3000/api/upload
</syntaxhighlight>

== 总结 ==
Next.js 文件上传功能结合了前端表单处理和后端API路由，为开发者提供了灵活的解决方案。通过本章的学习，你应该能够：
1. 实现基本的文件上传功能
2. 添加文件验证和错误处理
3. 优化上传体验（如进度显示）
4. 理解安全注意事项

随着应用规模的增长，可以考虑使用专业的文件存储服务，并实现更高级的功能如分块上传和断点续传。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js表单处理]]