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

忘是亡心i 2023-08-17 16:18 60阅读 0赞

在进行数据的管理过程中，图片的上传是必不可少的，在这里我的是用户头像为例，在图片上传的过程中，NodeJs我用到了一个叫做**multer**的模块，他有一个要求就是上传的时候必须通过**multipart/form-data**的方式进行上传，简单地说就是提交一个form表单，或者提交一个**FormData**，所以在这一过程中，我还用到了**body-parser**，需要注意的是，**multer**和**body-parser**不仅仅需要引入那么简单，还需要进行一点配置。

我这次只是一个实验的项目，所以所我把图片上传的位置直接配置在了项目里的**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，哈哈。

[GitHub]: https://github.com/hushuaibo/mobileBooksCampusAdmin/blob/master/src/page/user/user.vue