美文网首页工作生活
nodeJs与elementUI实现上传图片

nodeJs与elementUI实现上传图片

作者: 帅的潇洒 | 来源:发表于2019-07-01 16:11 被阅读0次

    前端使用的是elementUI里面的upload封装好的组件

    1.引入multer 和 fs(没有则需要npm下载)

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

    2.创建storage,storage提供了访问特定于域名下的会话存储或本地存储的功能,例如可以添加、修改或删除存储的数据项。

    如果你想要操作一个域名的会话存储,可以使用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);
        }
    });
    

    3.创建文件夹

    var createFolder = function (folder) {
        try {
            // 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在
            // 如果文件路径不存在将会抛出错误"no such file or directory"
            fs.accessSync(folder);
        } catch (e) {
            // 文件夹不存在,以同步的方式创建文件目录。
            fs.mkdirSync(folder);
        }
    };
    

    4.创建上传文件路径

    var uploadFolder = './upload/';
      createFolder(uploadFolder);
    

    5.创建 multer 对象

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

    6.为前端提供上传接口

    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实现上传图片

        本文链接:https://www.haomeiwen.com/subject/saggcctx.html