Multipart._final 中的表单意外结束-下一个 js 和 multer 错误

Question

我一直在尝试上传pdf并在下一个js中使用multer将其保存在后端。现在有效负载确实转到后端 但问题是它不将文件存储在公共/上传中。事实上我根本无法访问它。

这里未定义是我试图访问文件，上面是一个错误。

也就是说，如果我控制台日志 req.body 我得到这个

我该怎么做

1. 从后端访问文件
2. 将其存储在“公共/上传”中

import React, { useState } from 'react';

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

    const handleChange = (event) => {
        setFile(event.target.files[0]);
        console.log(event.target.files[0]);
    };

    const handleUpload = async (event) => {
        event.preventDefault();
        if (!file) {
            alert('Please select a file before uploading.');
            return;
        }

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

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

            if (response.ok) {
                alert('File uploaded successfully!');
            } else {
                alert('Failed to upload the file. Please try again.');
            }
        } catch (error) {
            console.error('Error uploading the file:', error);
        }
    };

    return (
        <form encType="multipart/form-data" method="post">
            <input
                type="file"
                name="file"
                accept="application/pdf"
                onChange={handleChange}
            />
            <input type="submit" value="Upload" onClick={handleUpload} />
        </form>
    );
};

export default FileUploader;

这是我的前端代码

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

  })


export default function handler(req, res) {
  
  upload().single('file')(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      console.log(err)
    } else if (err) {
      console.log(err)
    }
    console.log(req.file)
  })


  res.status(200).json({ name: 'John Doe' })
}

这是我的后端代码

如果我添加

                    'Content-Type': 'multipart/form-data',
                },

正如我正在搜索的答案之一中提到的（在 chatgpt 中）。我会收到一个不同的错误，提示“Multipart: Boundary not found”。

我也尝试观看此 YouTube 频道 youtube 但也尝试观看其他频道。缺点是他们告诉我如何在 Node js 中解决问题，而对于下一个 js，我找不到太多资源