req.file дает undefined в multer - PullRequest
Новая
       29

req.file дает undefined в multer

0 голосов
/ 03 августа 2020

Я пытаюсь отправить изображение на резервную копию (node.js) из внешнего интерфейса (reactjs) с помощью multer, и ниже приведены файлы кода, используемые при отправке изображения. Я получаю ответ на интерфейс правильно, и файл, отправленный на бэкэнд, тоже в порядке, но на бэкэнде req.file дает мне undefined. Сейчас я пытаюсь сохранить изображение локально.

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;
...