如何保存从 NextJS 客户端发送的图像到我的 NodeJS 服务器？

Question

几周前我尝试将图像上传到我的 NodeJS 服务器，然后从那里将其保存到 S3 存储桶，但我被困在第一部分，我的服务器没有收到图像。我使用multer 将其保存在public/ 文件夹中。

这就是我的客户所拥有的：

const onSubmit = async (data: any) => {
        const image = data.file[0];
        const params: RequestInit = {
            method: 'POST',
            headers: {
                'Content-Type': `multipart/form-data`,
                'Accept': 'image/*'
            },
            body: JSON.stringify(data)
        };
        await fetch('/api/post/create-post', params);
        // Upload image to S3 Bucket
        // Save post to db
    }

我在Content-Type 和data=${JSON.stringify(data)} 中设置了一个边界，当我在尝试保存图像之前记录我的请求标头时，没有“边界”，而是收到此错误Error: Multipart: Boundary not found（此错误显示在我的服务器控制台中）

这就是我在我的服务器中拥有的：

const upload = multer({
    dest: 'public/'
})

const router = express.Router();

router.post('/', (req, res, next) => {
    console.log(req.headers);
    next();
}, upload.single('photo'), (req, res) => {
    console.log(req.file);

    res.json({ success: true });
})

module.exports = router;

Answer 1

您可以从 Axios 标头中删除内容类型，并让 Axios 自行设置。

const onSubmit = async (data: any) => {
        const image = data.file[0];
        const params: RequestInit = {
            method: 'POST',
            body: JSON.stringify(data)
        };
        await fetch('/api/post/create-post', params);
        // Upload image to S3 Bucket
        // Save post to db
    }

您可以检查this 链接是否有边界错误。