Next.js 文件上传

Next.js 文件上传

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

简介

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

Next.js 的文件上传功能可以用于多种场景，例如：

• 用户头像上传
• 文档或图片分享
• 多媒体内容管理

基本实现

客户端代码

首先，创建一个简单的表单，允许用户选择并上传文件：

// 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>
  );
}

服务端代码

在 Next.js 的 API 路由中处理文件上传：

// 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: '服务器错误' });
  }
}

进阶实现

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

文件验证

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

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);
  },
});

进度显示

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

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);
  }
};

实际应用案例

用户头像上传

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

文档管理系统

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

安全注意事项

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

性能优化

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

常见问题

为什么我的文件上传失败？

可能原因：

• 文件大小超过限制
• 文件类型不被允许
• 服务器存储空间不足
• 网络连接问题

如何测试文件上传功能？

可以使用Postman或curl命令测试API：

curl -X POST -F "file=@test.jpg" http://localhost:3000/api/upload

总结

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

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