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

相关推荐
用户6757049885022 分钟前
不装插件不写代码!教你一招搞定网页长截图!清晰且高效!
前端·chrome
tjl521314_216 分钟前
01C++ 分离编译与多文件编程
前端·c++·算法
sayamber9 分钟前
vLLM 容器化部署实战:如何在云服务器上跑起高并发大模型推理服务
前端
LIO9 分钟前
Pinia 极简指南:Vue 3 官方状态管理库
前端·vue.js
AI攻城狮10 分钟前
DeepSeek 的 Vision 能力要来了吗?
人工智能·后端·openai
用户6224757584624 分钟前
面试官问我:"如何实现你项目中的这块代码."我说:"看好了."
后端
空中海24 分钟前
Nacos 2: Spring Boot Demo 实战
java·spring boot·后端
阿丰资源30 分钟前
基于Spring Boot的美容院管理系统(附源码+数据库+文档)
数据库·spring boot·后端
Wenzar_37 分钟前
# D3.js实战进阶:从基础图表到交互式数据仪表盘的全流程构建在现代前端开发中,**数据可视化已成为提升用户体验的核心能力之一
java·javascript·python·信息可视化·ux
TE-茶叶蛋38 分钟前
Spring自动配置分析
java·后端·spring