NodeJs+Vue+MongoDB后台管理系统模板（4）添加数据之图片上传

在进行数据的管理过程中，图片的上传是必不可少的，在这里我的是用户头像为例，在图片上传的过程中，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，哈哈。