Next.js 13+ 文件上传新技巧：极速上手无需第三方库

2023-12-21 22:53:16

Next.js 13+ 中使用 Fetch API 的文件上传指南

准备工作

踏入 Next.js 的文件上传之旅，首先需要确保已安装 Node.js 和 npm。然后，让我们创建一个新的 Next.js 项目：

npx create-next-app my-app

创建上传组件

在 pages 目录中，创建一个名为 Upload.js 的文件，用于构建我们的上传组件：

import React, { useState } from "react";
import axios from "axios";

const Upload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (!selectedFile) return;

    const formData = new FormData();
    formData.append("file", selectedFile);

    axios.post("/api/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
};

export default Upload;

创建 API 路由

在 pages/api 目录中，创建一个名为 upload.js 的文件，作为我们的 API 路由：

import { NextApiRequest, NextApiResponse } from "next";
import fs from "fs";

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

  const file = req.files?.file;
  if (!file) {
    res.status(400).json({ message: "No file uploaded" });
    return;
  }

  const fileName = Date.now() + "-" + file.name;
  await file.mv(`./uploads/${fileName}`);

  res.status(200).json({ message: "File uploaded successfully" });
}