【问题帖】Next上传文件报错,求大佬看一下

前端文件: /src/app/api/compress/route.ts

tsx 复制代码
"use client";

import { useState } from "react";
export default function UploadForm() {
  const [file, setFile] = useState<File>();

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    // 阻止表单提交行为
    e.preventDefault();
    if (!file) return;

    try {
      const data = new FormData();
      data.set("file", file);
      const res = await fetch("/api/upload", {
        method: "POST",
        body: data,
      }); // handle the error
      if (!res.ok) throw new Error(await res.text());
    } catch (e: any) {
      // Handle errors here
      console.error(e);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="file" name="file" onChange={(e) => setFile(e.target.files?.[0])} />

      <input type="submit" value="Upload" />
    </form>
  );
}

后端文件:src/app/api/upload/route.ts

tsx 复制代码
import { writeFile } from "fs/promises";
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const data = await request.formData();
  const file: File | null = data.get("file") as unknown as File;

  if (!file) {
    return NextResponse.json({ success: false });
  }

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes); // 这里是你要进行保存的文件目录地址

  const path = `/tmp/${file.name}`;
  await writeFile(path, buffer);
  console.log(`open ${path} to see the uploaded file`);

  return NextResponse.json({ success: true });
}

报错内容:

麻烦各位熟悉Next的大佬看一下

问题代码的GitHub地址:github.com/AnsonZnl/ne...

相关推荐
sycmancia几秒前
Qt——布局管理区(二)
开发语言·前端·qt
勇哥是也几秒前
前端也能玩 AI:阿里云百炼流式对话开发
前端·人工智能·阿里云
夜影风2 分钟前
Prompt Engineering(提示词工程) vs. Agent Skills(智能体技能):从“口头吩咐”到“标准化操作手册”的进化
前端·人工智能·prompt
落魄江湖行5 分钟前
基础篇九 Nuxt4 插件系统:扩展 Nuxt 能力
前端·vue.js·typescript·nuxt4
马丁玩编程12 分钟前
从程序员到AI工程师:距离有多远?附全套学习路线图
后端·程序员·aigc
程序员小寒15 分钟前
JavaScript设计模式(十):模板方法模式实现与应用
前端·javascript·设计模式·模板方法模式
Bigger15 分钟前
第六章:我是如何剖析 Claude Code 的终端界面渲染原理的
前端·react.js·claude
Alvin千里无风15 分钟前
ECharts 世界地图实现完整指南
前端·echarts
rannn_11117 分钟前
【Redis|高级篇2】多级缓存|JVM进程缓存、Lua语法、多级缓存实现(OpenResty)、缓存同步(Canal)
java·redis·分布式·后端·缓存·lua·openresty
We་ct18 分钟前
EventSource & WebSocket & HTTP
前端·javascript·网络·websocket·网络协议·http·面试