主页 / coding / 问题 / 76985726
Accepted
Rishabh Kumar
Asked: 2023-08-27 12:31:02 +0800 CST

在 Next.js 13 中将图像上传到服务器会导致 ENOENT 错误

  • 772

我正在使用 Next.js 13 开发一个项目，在尝试将图像上传到服务器时遇到问题。我收到的错误消息是：

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

在此输入图像描述

next.js

1 个回答

  1. Best Answer

    在服务器端代码中，您正在使用 join 函数构建文件路径来保存上传的图像。join 函数期望其参数是将路径段连接起来形成新路径。但是，您提供 ./ 作为路径段，它引用当前目录，然后向其附加“temp”和 file.name。这会产生一个以 ./ 开头的串联路径，使其成为当前工作目录的相对路径。
    您可以使用 process.cwd() 提供绝对路径，以确保文件路径的构造一致并且不受工作目录中更改的影响。尝试这样的事情，

    const fileName = file.name
const path = join(process.cwd(), 'temp', fileName) // Construct absolute path

    如果您仍然遇到问题，那么您需要确保临时文件夹存在，然后再尝试将文件保存到其中。如果目录不存在，可以使用 fs 模块创建该目录，

    // Ensure that the 'temp' directory exists
try {
  mkdirSync(join(process.cwd(), 'temp'), { recursive: true })
} catch (error) {
   console.error("Error creating 'temp' directory:", error)
   return NextResponse.json({ error: "An error occurred while creating the directory." }, { status: 500 })
}
    • 1

相关问题