Node.js React，Node，Mongodb：我的图像文件没有从后端提供，并且试图在React端渲染它，但找不到404

我正在从React前端上传图像

constructor(props) {
        super(props);
        this.state = {
            uploadRecipesFormData: {},
            selectedFile: null,
            redirect : null,
        };
    }

    uploadRecipe = () => {
        const formData = new FormData();
        formData.append('file', this.state.selectedFile, this.state.selectedFile.name);
        for(const key in this.state.uploadRecipesFormData){
            formData.append(key, this.state.uploadRecipesFormData[key]);
        }
        axios.post(`http://localhost:3000/recipes`, formData, {})
             .then(res =>  {
                 alert(res.data);
                 this.setState({
                     redirect: "/uploaded-recipes"
                 });
             })
             .catch(err => console.error(err));
    }

    onChangeImageHandler = e => {
        this.setState({
            selectedFile: e.target.files[0]
        });
    }

    handleChange = e => {
        e.preventDefault();
        this.handleInputChange(e.target.name, e.target.value);
    }

    handleInputChange = (key, value) => {

        this.setState({
            uploadRecipesFormData: {
                _id: uuidv4(),
                ...this.state.uploadRecipesFormData,
                addedBy: 'guest',
                [key]: value
            }
        });
    }

    submitRecipe = e => {
        e.preventDefault();
        this.uploadRecipe();
    }

在后端Im接收图像和其他表单数据时：

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/images')
    },
    filename: (req, file, cb) => {
        cb(null, `${file.originalname} `)
    }
});

const upload = multer({ storage: storage }).single('file');

/*
Endpoint: /recipes
Outcome: Add recipe 
*/ 
router.post('/', (req, res) => {

    upload(req,res, err => {
        if(err instanceof multer.MulterError) {
            return res.status(500).json(err);
        }
        else if(err) {
            return res.status(500).json(err);
        }
        console.log(req.file.filename);
        console.log(req.body);

            const newRecipeData = new Recipe({
                _id: req.body._id,
                name: req.body.name,
                ingredients: req.body.ingredients.split(','),
                instructions: req.body.instructions,
                cuisine: req.body.cuisine || '',
                image: `http://localhost:3000/images/${req.file.filename}` || '',
                addedBy: req.body.addedBy || ''
        });

          newRecipeData.save()
                     .then(result => {
                         res.status(201).send('Recipe added successfully!');
                     })
                     .catch(err => console.log(err));
    });
});

数据存储在MongoDb中，路径为公共目录到映像。但是，此文件存储为二进制文件，而不是图像文件。 我已在我的app.js中启用了express static：

    app.use(express.static('public'));

---

我可以在public/images文件夹中看到该文件，但它是一个二进制文件，因此当我尝试从react前端访问它时，它会抛出404错误。然后，我手动尝试将实际图像添加到public/images文件夹，结果成功了。从前端接收文件数据时，如何保留文件类型？在线答案不清楚我想做什么。

您的代码似乎没有问题，但是，我可以在这段代码中发现可能导致错误的小错误：

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, 'public/images')
    },
    filename: (req, file, cb) => {
        cb(null, `${file.originalname} `)
    }
});

此文件中${file.originalname}后面有一个额外的空格

---

cbnull，`${file.originalname}`语句。额外的空间将改变文件名，因此，它显示为二进制文件，您无法从前端访问它。尝试删除该空间，看看是否有效。

就是这样！你救了我一天。非常感谢