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 });
});

nodeJs与elementUI实现上图片

推荐阅读