我正在尝试上传一个文件名和一个帖子(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:控制台中没有任何错误
谢谢!!
我认为有两个问题:
首先,当您设置
multer({ storage }).single('image');
但是您永远不会将任何字段命名为“image",无论是在HTML中,还是在调用
此外,要发送文件,您必须设置正确的
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'
}
})