在进行数据的管理过程中,图片的上传是必不可少的,在这里我的是用户头像为例,在图片上传的过程中,NodeJs我用到了一个叫做multer的模块,他有一个要求就是上传的时候必须通过multipart/form-data的方式进行上传,简单地说就是提交一个form表单,或者提交一个FormData,所以在这一过程中,我还用到了body-parser,需要注意的是,multer和body-parser不仅仅需要引入那么简单,还需要进行一点配置。
const multer = require('multer');
const bodyParser = require('body-parser');
router.use(bodyParser.urlencoded({extended:true}));
router.use(bodyParser.json());
const upload = multer({storage:
multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/upload/')
}, filename: function (req, file, cb) {
cb(null,Date.now() + '.' + file.originalname.split('.')[1])
}
})
});
我这次只是一个实验的项目,所以所我把图片上传的位置直接配置在了项目里的public下的upload文件夹下了,在真正的项目里不推荐这样使用。
router.post(URL,upload.single(FILENAME),(req,res)=>{
//回调函数
}
在附带图片上传的接口中,写法是这样的,就是说需要在接口这里直接指定图片的名称,也就是form表单中type=‘file’的input的name值,而在回调函数中,可以通过req.file拿到上传的文件信息,通过req.body拿到非文件的数据,图片multer会自动帮你存储到你配置的文件夹下,这时候只需要把图片的路径存储到数据库即可,我是通过这种方式来获取图片的路径信息的。
imageUrl = 'http://' + req.headers.host + '/upload/' + req.file.filename
接口具体的写法如下:
// 添加用户
router.post('/userAdd',upload.single('picture'),(req,res)=>{
const USERNAME = req.body.username;
const PASSWORLD = req.body.password;
const AGE = req.body.age;
const GENDER = req.body.gender;
const BIRTHDAY = req.body.birthday;
const PICTURE = 'http://' + req.headers.host + '/upload/' + req.file.filename;
const HOMETOWN = req.body.hometown;
const PHONE = req.body.phone;
const QQ = req.body.qq;
DB.insert('user',{
UserId : new Date().getTime(),
UserName : USERNAME,
PassWorld : PASSWORLD,
Age : AGE,
Gender : GENDER,
Birthday : BIRTHDAY,
Picture : PICTURE,
Hometown : HOMETOWN,
Phone : PHONE,
QQ : QQ
},(err,data)=>{
if(err){
res.send({
code : 0 ,
msg : '添加失败'
});
return
}
res.send({
code : 1 ,
msg : '添加成功'
})
})
});
我在Vue中是通过input的v-model绑定数据后,监听form表单的提交,阻止默认行为(@submit.prevent ="addUser")后,提交的FormData,这样有一个好处是可以获得服务端返回的信息。
获取图片的时候或许有人会说,type=‘file’没法进行v-model的双向绑定,我选择的处理方法是定义一个函数,在input触发change的时候去调用,获取files[0],然后给到vm,就可以正常的使用了。
chooiceFile(event) {
this.file = event.target.files[0];
}
最后想要完整代码的,欢迎访问我的GitHub,最好来个Star,哈哈。