0

我正在使用 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 无关。我不知道如何进行。

4

3 回答 3

4

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

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

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

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

于 2021-03-03T15:23:47.110 回答
3

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

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

至

const storage = multer.memoryStorage()
const upload = multer({storage: storage});
于 2021-06-08T15:32:31.620 回答
2

对于那些仍在寻找如何使用 multer 作为 nextJs 的中间件的解决方案的人，这里有一个 API 路由示例，使用 multer 有中间件。该路由正在调用 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;
于 2021-11-15T10:49:38.327 回答