NextJS 和 multer，无法上传和访问文件

Question

我目前正在尝试使用 NextJS 在前端使用以下代码上传图像：

const [avatar, setAvatar]: any = useState<File | null>(null);

    async function handleUpload () {
        const formData = new FormData();
        formData.append("avatar", avatar);
        const resp = await fetch("http://localhost:3000/api/uploadavatar", {
            method: "POST",
            headers: {
                "Content-Type": "multipart/form-data"
            },
            body: formData
        });
        const json = await resp.json();
        console.log(json.data)
    }

然后使用以下代码在 api 端点中使用 multer 上传它：

import dbConnect from "../../lib/dbConnect";
import type { NextApiRequest, NextApiResponse, PageConfig } from 'next'
import authenticated from "../../lib/authenticated";
const multer = require("multer");

export default authenticated(async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
    await dbConnect()
    const {method} = req
    const storage = multer.memoryStorage();
    const upload = multer({storage: storage});

    if (method === "POST") {
        try {
            upload.single("avatar")
            const file = req.file;
            res.status(200).json({success: true, data: file})
        } catch {
            res.status(400).json({success: false})
        }
    };
});

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

当我尝试记录

file

变量时，它只是返回未定义。我不确定为什么它不起作用。

Answer 1

下面提供了解决此错误的代码。但请确保仅在页面目录中使用 nextjs 13，因为 multer 在下一个 js 13 应用程序路由器中无法正常工作。

前端代码

    const handleSubmit = async e => {
    const body = new FormData();
    body.append('pdf', file);
    const response = await axios.post('/api/pdf', body, {});
    console.log(response.data);
    setData(response.data);
};

后端代码

import { createRouter } from 'next-connect';
import fs from 'fs';
import pdf from 'pdf-parse';
import multer from 'multer';

const storage = multer.diskStorage({
destination: 'public/uploads/',
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});
const upload = multer({ storage: storage });
const router = createRouter();

router.use(upload.any()).post(async (req, res) => {
let pdfText = '';
console.log('files number', req.files.length);
let dataBuffer = fs.readFileSync(req.files[0].path);

await pdf(dataBuffer).then(function (data) {
    pdfText = data.text.slice(500, 2300);
    console.log(data.text.slice(500, 2300));
});
});

  export default router.handler({
onError: (err, req, res) => {
    console.error(err.stack);
    // res.end(err.message);
    res.end(err);
},
});

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