为什么multer中间件之后我的文件没有被考虑？

Question

我正在尝试上传一个文件名和一个帖子（9插科打诨风格）到我的mysql数据库，并存储文件到我的项目文件夹。我正在从前端获取文件（前端的console.log工作得很完美），然后我使用nodejs+express后端处理文件并将其发送到我的数据库。我创建了一个multer中间件来设置文件名，扩展名，磁盘位置，然后在一个控制器中我试图得到文件发送它做数据库。console.log“route ok”可以，但是当我使用console.log req.file或req.file.filename或req.body.file等。。。我得到了一个不明确的答案。。。我真的看不出我的代码有什么问题，我已经在另一个项目中使用了它，我工作得很好，但我只做了后端。

下面是我的前端代码（vue js）:

<template>
    <div id="container">
        <div id="formPost">
            <button class="btn btn-primary" @click.prevent="displayFormPost = !displayFormPost">Créer un post</button>
            <form v-if="displayFormPost">
            <input type="text" class="form-control" placeholder="Entrer la description de l'image" v-model="messageToPost">
            <input type="file" ref="file">  <button class="btn btn-primary" @click.prevent="postMessage">Poster</button>
        </form>
        </div> 
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            displayFormPost: false,
            messageToPost: ''
        }
    }, 
    methods: {
        postMessage() {
            let file = this.$refs.file.files[0];
            let message = this.messageToPost; 
            console.log(file);
            axios.post('http://localhost:3000/wall/post/', { message , file } )
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.log(error);
            })
        }
    }
}
</script>

我的multer-config中间件:

const MIME_TYPES = {
    'image/jpg': 'jpg', 
    'image/jpeg': 'jpg', 
    'image/png': 'png', 
    'image/gif': 'gif'
}

const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, 'images')
    }, 
    filename: (req, file, callback) => {
        const name = file.originalname.split(' ').join('_');
        const extension = MIME_TYPES[files.mimetype];
        callback(null, name + Date.now() + '.' + extension);
    }
})

module.exports = multer({ storage }).single('image'); 

null

exports.postMessage = (req, res, next) => {
    console.log(req.file)
    console.log('routeok');
}

我和莫特设定的路线:

const express = require('express');
const router = express.Router();
const multer = require('../middleware/multer-config');

const wallControllers = require('../controllers/wall');

router.post('/post/', multer, wallControllers.postMessage);

module.exports = router; 

Ps:控制台中没有任何错误

谢谢！！

Answer 1

我认为有两个问题:

首先，当您设置 时，您告诉它在名为“image"的字段中期望该文件:

multer({ storage }).single('image');

但是您永远不会将任何字段命名为“image"，无论是在HTML中，还是在调用 时。

此外，要发送文件，您必须设置正确的 HTTP头，并且应该使用FormData API，如此答案所述。

null

const formData = new FormData();
formData.append("image", file);
formData.append("message", message);
axios.post('http://localhost:3000/wall/post/', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})