Next.js 13图片上传至服务器时出现ENOENT错误求助

错误信息 #

- error Error: ENOENT: no such file or directory, open 'temp/img.jpeg'

相关代码 #

客户端代码 #

"use client";
import axios from "axios";
import { useState } from "react";

export default function Home() {
  const [file, setFile] = useState();
  const [name, setname] = useState("rishabh");
  const submit = async (e) => {
    e.preventDefault();
    const formdata = new FormData();
    formdata.set("file", file);
    const res = await axios.post("/api/post", formdata);
    console.log(res);
  };

  function sendfile(e) {
    console.log(e.target.files[0]);
    setFile(e.target.files[0]);
    console.log(file);
  }
  
  return (
    <div>
      <form onSubmit={submit}>
        <label>upload files</label>
        <input
          name="file"
          onChange={(e) => setFile(e.target.files[0])}
          type="file"
        ></input>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

服务端代码 #

import { writeFile, writeFileSync } from "fs";
import { NextRequest,NextResponse } from "next/server";
import {join} from 'path';
export async function POST(NextRequest)
{
    const data = await NextRequest.formData();
    const file = data.get('file');
    const bytes = await file.arrayBuffer()
    const buffer = Buffer.from(bytes)
    const path = join('./','temp',file.name)
    console.log('====================================');
    console.log(file.name,buffer);
    console.log('====================================');
    writeFileSync(path,buffer);
    
    return NextResponse.json({message:"get"})
}

问题原因 #

报错核心是**temp目录不存在**，writeFileSync方法不会自动创建不存在的目录结构，当尝试写入文件到./temp/img.jpeg时，因上级目录未创建，直接抛出ENOENT错误。

解决方案 #

修改服务端代码，在写入文件前先检查并创建目标目录：

import { writeFileSync, mkdirSync } from "fs";
import { NextRequest, NextResponse } from "next/server";
import { join } from 'path';

export async function POST(request) {
    const data = await request.formData();
    const file = data.get('file');
    const bytes = await file.arrayBuffer();
    const buffer = Buffer.from(bytes);
    
    // 使用process.cwd()获取项目根目录，避免相对路径歧义
    const tempDir = join(process.cwd(), 'temp');
    // 创建temp目录，recursive: true确保父目录不存在时也能创建
    mkdirSync(tempDir, { recursive: true });
    
    const filePath = join(tempDir, file.name);
    writeFileSync(filePath, buffer);
    
    return NextResponse.json({ message: "文件上传成功" });
}

额外优化建议 #

• 避免用./作为相对路径起点，改用process.cwd()获取项目根目录，确保路径在开发/生产环境下都正确
• 添加文件重命名逻辑（比如文件名前加时间戳），避免同名文件覆盖
• 生产环境建议将上传文件存储到云存储（如AWS S3、阿里云OSS等），而非本地服务器目录

内容的提问来源于stack exchange，提问作者Rishabh Kumar