11.Next.js14 后端接收表单上传的文件并保存文件

上传文件并保存文件

这一章我们来学习如何将从表单上传的文件保存到公共目录（public directory）中。

我们可以在app目录下面创建一个文件目录file，编写上传表单的代码，创建一个FormData 对象，并将其通过 POST 请求发送到 /api/upload 路由。

//app/file/page.tsx
'use client'
import React, {useState} from "react";

export default function File(){
    //创建了一个名为 uploadFile 的状态变量，初始值为 null。这个状态变量用于存储用户选择的文件。
    const [uploadFile,setUploadFile] = useState<File | null>(null)
    //处理文件输入框的变化事件。当用户选择文件时，它将选定的文件存储在 uploadFile 状态变量中。
    const handleChange = (e:React.ChangeEvent<HTMLInputElement>) => {
      const files = e.target.files;
      console.log(1111,files)
      if (files && files[0]){
          setUploadFile(files[0])
      }
    }
    
    //当用户点击提交按钮时，它会创建一个 FormData 对象，将选择的文件附加到该对象中，并使用 fetch 函数将数据上传到服务器。
    const handleSubmit = async (e:React.FormEvent<HTMLFormElement>) =>{
        e.preventDefault()
        if (!uploadFile){
             return;
        }
        //创建一个新的 FormData 对象，用于构建要上传的表单数据。
        const formData = new FormData()
        //将选择的文件添加到 FormData 对象中
        formData.append('file',uploadFile)
        const res = await fetch('http://localhost:3000/api/upload',{
            method:'POST',
            body:formData
        })
        const message = await res.json()
        console.log(222,message)
    }

    return (
        <div>
            <h1>文件上传</h1>
            <form onSubmit={handleSubmit}>
                <input name="file" type="file" onChange={handleChange}/>
                <button type="submit" className="px-2 py-1 rounded-lg bg-blue-600 text-white">提交</button>
            </form>
        </div>
    )
}

在api目录下创建upload目录，并创建route.ts文件。

//app/api/upload/route.ts
import {writeFile} from "node:fs/promises";
import {NextResponse} from "next/server";

export default async function POST(request:Request) {
    //使用request.formData() 方法异步获取请求中的表单数据
    const formData = await request.formData()
     console.log('获取表单数据',formData)
    //从表单数据中获取名为 'file' 的文件，并将其转换为 File 对象
    const file = formData.get('file') as File
    //将文件内容读取为 ArrayBuffer,arrayBuffer 是二进制文件数据的表示形式。
    const arrayBuffer = await file.arrayBuffer()
    //将 ArrayBuffer 转换为 Node.js 中的 Buffer 对象。Buffer 通常用于处理二进制数据。
    const buffer = Buffer.from(arrayBuffer)
    //文件保存路径
    const filePath = `./public/${file.name}`
    //使用 writeFile 函数将文件的内容写入到指定的文件路径。这将把上传的文件保存到 public 目录中。
    await writeFile(filePath,buffer)
    
    return NextResponse.json({message:'success'})
}