如何使用 Formidable 在 Next.js 中处理文件上传？

Question

我正在使用 Next.js 开发一个项目，我需要管理文件上传。我正在尝试使用强大的库在服务器端处理这些上传，但遇到了一些问题。

当我尝试上传文件时，收到 500 错误，但没有任何具体消息。

什么可能导致此错误？ 我是否需要任何额外的设置或步骤来正确管理 Next.js API 路径中强大的文件上传？ 这是我当前的设置：

import formidable from 'formidable';
import fs from 'fs';

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

export default async (req, res) => {
    const form = new formidable.IncomingForm();

    form.parse(req, (err, fields, files) => {
        if (err) {
            res.status(500).send(err);
            return;
        }

        const oldPath = files.file.filepath;
        const newPath = `./public/uploads/${files.file.originalFilename}`;

        fs.rename(oldPath, newPath, (err) => {
            if (err) {
                res.status(500).send(err);
                return;
            }

            res.status(200).send('File uploaded successfully');
        });
    });
};

我的JSX

import { useState } from 'react';

const Home = () => {
    const [file, setFile] = useState(null);

    const handleFileChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        const formData = new FormData();
        formData.append('file', file);

        const res = await fetch('/api/upload', {
            method: 'POST',
            body: formData,
        });

        if (res.ok) {
            console.log('File uploaded successfully');
        } else {
            console.error('File upload failed');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" onChange={handleFileChange} />
            <button type="submit">Upload</button>
        </form>
    );
};

export default Home;

Answer 1

尝试从此存储库复制代码：https://github.com/tuffstuff9/nextjs-pdf-parser。不使用强大的 iirc，但可以达到目的。