时间戳

首页 > 解决方案 > 为什么在 multer 中间件之后不考虑我的文件？

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

问题描述

我正在尝试将文件名和帖子（9 gag 风格）上传到我的 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>

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

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

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：控制台完全没有错误

谢谢 ！！

标签： javascriptnode.jsvue.jsmulter

解决方案

我认为有2个问题：

首先，当你设置multer你告诉它期待一个名为“图像”的字段中的文件：

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

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

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

所以你可以试试：

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

推荐阅读