nextjs app 路由 上传文件

前端

FileUploadForm.tsx 文件

import React, { useState } from "react";
const uploadFile = async (file: any) => {
  const formData = new FormData();
  formData.append("file", file);

const uploadFile = async (file: any) => {
  const formData = new FormData();
  formData.append("file", file);

  const response = await fetch("/api/upload", {
    method: "POST",
    body: formData,
  })
    .then((res) => res)
    .catch((err) => {
      throw new Error("文件上传失败");
    });
    
  return response;
};

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

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

  const handleSubmit = async (event: any) => {
    event.preventDefault();

    await uploadFile(selectedFile);
  };

  return (
    <form onSubmit={handleSubmit} encType='multipart/form-data'>
      <input type='file' onChange={handleFileChange} />
      <button type='submit'>上传文件</button>
    </form>
  );
};

export default FileUploadForm;

后端 写在api/upload/route.ts中

import { writeFile } from "fs/promises";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const formData = await request.formData();
  // 获取上传文件
  const file = formData.get("file") as File;
  // 将文件保存到服务器的文件系统中
  const fileBuffer = await file.arrayBuffer();
  await writeFile("uploads/" + file.name, Buffer.from(fileBuffer));

  return new NextResponse("success", { status: 200 });
}

Building Your Application: Caching | Next.js (nextjs.org)

通过 request.formData() 来读取请求中的表单数据