为什么在 multer 中间件之后不考虑我的文件？

Question

我正在尝试将一个文件名和一个 post（9 个插科打诨风格）上传到我的 mysql 数据库，并将文件存储到我的项目文件夹中。我从前端获取文件（前端的 console.log 完美运行），然后我使用 nodejs + express 后端处理文件并将其发送到我的数据库。我创建了一个 multer 中间件来设置文件名、扩展名、磁盘位置，然后在控制器中我试图获取文件以将其发送到数据库。 console.log “路由正常”很好，但是当我 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>

我的多配置中间件：

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');

和我的控制器（到目前为止我一直在尝试显示文件名等）：

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

我的路线是用 multer 设置的：

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

我认为有两个问题：

首先，当您设置 multer 时，您告诉它期望文件位于名为“image”的字段中：

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

但是您永远不会将任何字段命名为“图像”，在 HTML 中也不会，在调用 axios 时也不会。

此外，要发送文件，您必须设置正确的 Content-Type HTTP header 并且您应该使用 FormData API，如 described in this answer.

所以你可以试试：

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'
    }
})

为什么在 multer 中间件之后不考虑我的文件？

Why is my file not being considered after multer middleware?

javascript

node.js

vue.js

multer