nodeJs與elementUI實現上圖片

在elementUI控件中有封裝好的圖片上傳組件，在使用組件使，圖片選中後請求後臺鏈接，將圖片上傳到後臺服務器。

在nodeJs中使用 multer  和 fs  ,對圖片數據進行重命名和上傳到新的文件夾。

步驟

1.下載multer

2.引入multer 和 fs

var multer = require('multer');
var fs = require('fs');

　　

3.建立storage,stroage提供了訪問特定於域名下的會話存儲或本地存儲的功能，例如能夠添加、修改或刪除存儲的數據項。

若是你想要操做一個域名的會話存儲，能夠使用Window.sessionStroage,若是想要操做一個域名的本地存儲，能夠使用window.localstroage

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 接收到文件後輸出的保存路徑（若不存在則須要建立）
        cb(null, 'upload/');
    },
    filename: function (req, file, cb) {
        // 將保存文件名設置爲 時間戳 + 文件原始名，好比 151342376785-123.jpg
        cb(null, Date.now() + "-" + file.originalname);
    }
});

　　

4.建立文件夾

var createFolder = function (folder) {
    try {
        // 測試 path 指定的文件或目錄的用戶權限,咱們用來檢測文件是否存在
        // 若是文件路徑不存在將會拋出錯誤"no such file or directory"
        fs.accessSync(folder);
    } catch (e) {
        // 文件夾不存在，以同步的方式建立文件目錄。
        fs.mkdirSync(folder);
    }
};

5.建立上傳文件路徑

var uploadFolder = './upload/';

  createFolder(uploadFolder);

6.建立 multer 對象

var upload = multer({ storage: storage });

7.爲前端提供上傳接口

router.post('/upload', upload.single('file'), function (req, res, next) {
    var file = req.file;
    console.log('文件類型：%s', file.mimetype);
    console.log('原始文件名：%s', file.originalname);
    console.log('文件大小：%s', file.size);
    console.log('文件保存路徑：%s', file.path);
    // 接收文件成功後返回數據給前端
    res.json({ res_code: '0', name: file.originalname, url: file.path });
});