前端文件: /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...