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，哈哈。