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

Question

我使用的是nextjs，我想上传一个文件，所以为了使用multer，我使用了next-connect

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的内容。我不知道该怎么做。

Answer 1

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

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

使用Nextjs：https://nextjs.org/docs/advanced-features/custom-server

• And添加中间件：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

Answer 2

也有同样的问题。我不知道它是否和你的一样，但以防万一它可能会帮助某人..当我将multer转换为使用内存存储而不是桌面存储时，它工作得很好。在我的例子中，我在multer之后使用了另一个中间件来上传到aws，所以我不需要将文件永久地存储在. / s3中。我只需要下一个中间件中可用的req.file。在您的情况下，尝试更改

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

至

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

Answer 3

对于那些仍然在寻找如何将multer用作nextJs中间件的解决方案的人，这里有一个使用multer has中间件的API路由示例。该路由正在调用getSignedUrl函数将文件上传到存储桶。

运行nextJs v12和multer 1.4.3

import multer from "multer";
import { NextApiRequest, NextApiResponse } from "next";
import { getSignedUrl } from "../../lib/uploadingToBucket";

function runMiddleware(
  req: NextApiRequest & { [key: string]: any },
  res: NextApiResponse,
  fn: (...args: any[]) => void
): Promise<any> {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}

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

const handler = async (
  req: NextApiRequest & { [key: string]: any },
  res: NextApiResponse
): Promise<void> => {
  //const multerStorage = multer.memoryStorage();
  const multerUpload = multer({ dest: "uploads/" });

  await runMiddleware(req, res, multerUpload.single("file"));
  const file = req.file;
  const others = req.body;
  const signedUrl = await getSignedUrl(others.bucketName, file.filename);
   res.status(200).json({ getSignedUrl: signedUrl });
};

export default handler;