Multer 不使用 next-connect 返回 req.body 和 req.file

问题描述

我正在使用 nextjs 并且我想上传一个文件，所以我使用了 next-connect 以使用 multer

import nc from "next-connect";
import multer from "multer";

export const config = {
    api: {
      bodyParser: false,},}

const upload = multer({ dest: `${__dirname}../../public` });

const handler = nc()
  .use(upload.single('image'))
  .post(async (req,res)=>{
    console.log(req.body); // undefined
    console.log(req.file); // undefined
    res.status(200).send("yo");
  })


export default handler;

这是客户端代码：

function handleOnSubmit(e){
        e.preventDefault();

        const data = {};

        var formData = new FormData(e.target);
        for (const [name,value] of formData) {
            data[name] = value;
        }
        data.type = data.type[0].toupperCase();
        data.name = data.name[0].toupperCase();

        axios({
            method: "POST",url:"/api/manager",data,config: {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            }
        })
        .then(res=>{
            console.log(res);
        })
        .catch(err=>{
            throw err
        });
    }
...
return(
   ...
   <Form onSubmit={(e)=>handleOnSubmit(e)}>
   ...
   </Form>
)

我进行了搜索，发现的所有内容都与 nodejs 和 expressjs 有关，但在 next.js 上没有任何内容。我不知道如何继续。

解决方法

当我切换到 Next.js 框架时，我首先尝试使用 'multer' 库上传一个文件，并倾向于放弃并使用 'foridable'。原因是 Nextjs 和 multer 有一些可用的资源。

如果我没记错的话，multer 应该被添加为中间件，所以这意味着重写 server.js 页面。 您可以查看以下主题：

• 使用 Nextjs 创建自定义服务器： https://nextjs.org/docs/advanced-features/custom-server
• 并添加中间件：https://nextjs.org/docs/api-routes/api-middlewares#connectexpress-middleware-support

如果你不想处理这个问题，你可以查看一个关于使用这个强大的资源库的简单要点：https://gist.github.com/agmm/da47a027f3d73870020a5102388dd820

这是我创建的文件上传脚本：https://github.com/fatiiates/rest-w-nextjs/blob/main/src/assets/lib/user/file/upload.ts

,

遇到了同样的问题。不知道它是否与您的相同，但如果它可能对某人有所帮助.. 当我将 multer 转移到使用内存存储而不是桌面存储时，它工作正常.. 在我的情况下，我在 multer 之后使用另一个中间件上传到 aws s3 所以我不需要将文件永久存储在 ./public .. 我只需要下一个中间件中可用的 req.file 。 在你的情况下尝试改变

const upload = multer({ dest: `${__dirname}../../public` });

到

const storage = multer.memoryStorage()
const upload = multer({storage: storage});