从反应发布后没有在nodejs中获取图像文件

Question

我正在将图像文件从 react 发送到 nodejs。我使用了 SetImage 函数，其中用户选择的图像文件设置为“myimage”状态变量，并从 handleSubmit 使用 Axios 将图像发布到“/blog/posts”端点。图像文件正在“myimage”状态变量上加载，但是当我使用 Axios 发布时，我看不到图像文件的所有数据并给了我空对象。

这是我的 React 代码：-

import React, { useState, useRef } from "react";
import './postblog.css';
import axios from '../axios';

const PostBlog = () => {
    const [myimage,setImage] = useState("");
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.post('/blog/posts', {
            image:myimage
        }).then((res) => {
            console.log(res.body);
            console.log('successfully posted');
        });        
    }
    const SetImage = (e)=>{
        console.log(e.target.files[0]);
        setImage(e.target.files[0]);
        console.log(myimage);
    }
    return (
        <div className="postblog">
            <form onSubmit={handleSubmit} enctype="multipart/form-data">
                <input type="file" placeholder="Choose your file" onChange={(e)=>{SetImage(e)}} name="myImage"/>
               </div>
                <button type="submit">Post</button>
            </form>
        </div>
    );
}
export default PostBlog;

这是我的 Nodejs 代码：-

var storage = multer.diskStorage({
    destination: function(req, res, cb) {
        cb(null, './Routers/blog/uploads');
    },
    filename: function(req, file, cb) {
        cb(null, Date.now() + file.originalname);
    }
});

var upload = multer({
    storage: storage,
    limits: {
        fieldsize: 1024 * 1024 * 3
    }
});


blog.post('/posts', upload.single('myimage'), (req, res, next) => {
    console.log(req.body);
    console.log(details);
})

我得到的控制台输出是一个空对象

Answer 1

您应该发送内容类型为multipart/form-data 的文件，但在您的代码中您发送的文件为application/json 内容类型。

...

 const handleSubmit = (event) => {
        event.preventDefault();
        const formData = new FormData();
        formData.append('file', myimage);

        const config = {
          headers: {
            'content-type': 'multipart/form-data'
          }
        };

        axios.post('/blog/posts', formData, config).then((res) => {
            console.log(res.body);
            console.log('successfully posted');
        });        
    }

...