【问题帖】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...

相关推荐
哆啦A梦15889 分钟前
Vue3魔法手册 作者 张天禹 11_自定义hooks
前端·vue.js·typescript
广州华水科技15 分钟前
单北斗变形监测在大坝安全和地质灾害预警中的应用与优势
前端
阿珊和她的猫28 分钟前
深入理解 Vue 3 的 `setup` 函数
前端·vue.js·状态模式
weixin1997010801634 分钟前
微店商品详情页前端性能优化实战
前端·性能优化
FindYou.34 分钟前
基于mdEditor实现数据的存储和回显(导出pdf&表情包&目录)
javascript·vue
星火开发设计40 分钟前
STL 容器:vector 动态数组的全面解析
java·开发语言·前端·c++·知识
MX_93591 小时前
Spring注解方式整合Mybatis
java·后端·spring·mybatis
天開神秀1 小时前
解决 n8n 在 Windows 上安装社区节点时 `spawn npm ENOENT/EINVAL` 错误
前端·windows·npm
工业HMI实战笔记1 小时前
图标标准化:一套可复用的工业图标库设计指南
前端·ui·性能优化·自动化·汽车·交互
重生之后端学习1 小时前
105. 从前序与中序遍历序列构造二叉树
java·数据结构·后端·算法·深度优先