前端文件: /src/app/api/compress/route.ts
"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
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地址:https://github.com/AnsonZnl/next-upload
nextjs 配置有问题,不应该设置为 静态导出,报错那里也指明了。
也可以参考官方文档的解释:https://nextjs.org/docs/pages/building-your-application/deplo...
看起来你在上传文件时遇到了错误。这个错误可能是由于多种原因引起的,比如文件类型不正确、文件大小超过限制、服务器没有写入权限等。然而,根据你提供的代码和错误信息,我认为问题可能在于你尝试从 FormData
中获取文件,但没有正确地处理它。
在你的前端代码中,你尝试从 onChange
事件中获取文件,然后将其存储在状态中。然后,在 onSubmit
函数中,你创建一个新的 FormData
对象,设置文件,然后发送请求。
然而,在你的后端代码中,你试图从 request.formData()
中获取文件。这可能不会按预期工作,因为 request.formData()
可能不会包含你在 FormData
对象中设置的所有数据。
我建议你尝试以下更改:
在你的前端代码中,当你从输入字段中获取文件后,也将其添加到 FormData
对象中:
const onChange = (e) => { setFile(e.target.files?.[0]); const data = new FormData(); data.append("file", file); // You may need to adjust the URL based on your app's structure fetch("/api/upload", { method: "POST", body: data, });};
在你的后端代码中,从 request.body
中获取文件,而不是 request.formData()
:
import { getBody } from "next/server";export async function POST(request: NextRequest) { const data = getBody(request); const file = data.file; // 'file' is the key you appended to the FormData object in the frontend if (!file) { return NextResponse.json({ success: false }); } // The rest of your code remains the same...}
这应该解决你的问题。如果问题仍然存在,那么可能是其他问题,如文件类型不正确、文件大小超过限制、服务器没有写入权限等。
鄙人Javaer,对前端不太了解,想请教大佬们,前端上传文件的原理是什么(包括不限于表单上传、ajax上传) 比如,当点击上传按钮时,前端是如何将用户选择的文件转换成网络流,通过浏览器进行发送的? 前端小白,希望大佬们可以答疑解惑
前端上传文件一直报错,后端显示读文件出问题,刚进函数在绑定参数的时候就出了问题返回了 明明都能打印出来但文件就是上传不上去,服务器会报错 400 {"msg": "multipart: NextPart: EOF", "code": 40日, "data": null} 400 {"msg": "multipart: NextPart: EOF","code": 400, "data": null
springboot接收前端上传到后端的文件时,在controller层内大多数使用的是MultipartFile进行接收的,当使用file进行接收时会报错 有大佬知道为啥不能用file接收文件吗?
如何优雅地实现文件上传+文件夹上传+拖拽上传+进度追踪+...? 需求分析: 基础功能 显示 上传文件或文件夹的名字、类型、大小、状态。 类型 文件夹的类型可以"文件夹"或或者没有 文件的类型范围MIME。 大小 文件夹的大小为该文件夹及其子文件夹下所有文件的大小总和 状态 最少应该有的状态(假设上传一定成功,不会出现错误) 未上传 上传中(当处于此状态的时候要实时显示上传进度) 上传完成 其他扩
ftp 文件上传,一直报read ECONNRESET