req.file 在 multer 中给出 undefined答案

【问题标题】：req.file gives undefined in multerreq.file 在 multer 中给出 undefined
【发布时间】：2020-08-03 01:54:21
【问题描述】：

我正在尝试使用 multer 从前端（reactjs）将图像发送到支持的（node.js），下面给出了用于发送图像的代码文件。我正在正确接收对前端的响应，并且发送到后端的文件也很好，但是在后端 req.file 给了我未定义的信息。我现在正在尝试将图像保存在本地。

imageUpload.js

const multer = require('multer');
const randomString = require('randomstring');

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './uploads/');
    },
    filename: (req, file, cb) => {
        cb(null, randomString.generate(7) + 'filename');
    }
});

const fileFilter = (req, file, cb) => {
    //accept or reject a file
    if (file.mimetype === 'image/*')
        cb(null, true);
    else
        cb(null, false);
};
    
const upload = multer({ storage: storage });
/* 
const upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 5
    },
    fileFilter: fileFilter
}); */
   
module.exports = upload;

路由文件

const express = require('express');
const router = express.Router();
const upload = require('../middlewares/imageupload');

router.post('/createPost', upload.single('postImage'), (req, res) => {
    console.log(req.file);
    res.json('image received')
})

module.exports = router;

使用的中间件

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
module.exports = app => {
    app.use(express.json())
    app.use(bodyParser.json({ limit: '20mb' }))
    app.use(bodyParser.urlencoded({ limit: '20mb', extended: true, parameterLimit: 1000000 }))
    app.use(cors());
}

前端文件

import React, { useState } from 'react';
import FormButton from '../../components/formButton/formButton.component';
import './createPost.styles.scss';
import postService from '../../services/postservice';

const CreatePost = () => {
    const [imageFile, setImageFile] = useState(null)
    const handleSubmit = async e => {
        e.preventDefault();
        console.log(imageFile)
        const res = await http.post(`${API_ENDPOINT}/api/posts/createPost`, imageFile);;
        console.log(res);

    }
    const handleChange = e => {
        setImageFile(e.target.files[0]);
    }
    return (
        <div className="createPostContainer">
            <div className="createPostHead">Create Post</div>
            <div className="createPostBody">
                <form encType='multipart/form-data' onSubmit={handleSubmit}>
                    <input type="file" name='postImage' accept="image/png, image/jpeg, image/jpg" onChange={handleChange} className="imageUploadInput" />
                    <FormButton type="submit" loginSingupButton>Post</FormButton>
                </form>
            </div>
        </div>
    );
}

export default CreatePost;

【问题讨论】：

标签： node.js reactjs express multer

【解决方案1】：

改变

app.use(bodyParser.urlencoded({ limit: '20mb', extended: true, parameterLimit: 1000000 }))

到

app.use(bodyParser.urlencoded({ limit: '20mb', extended: false, parameterLimit: 1000000 })) 在您的中间件中

【讨论】：