nodeJs与elementUI实现上传图片

前端使用的是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 });
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 14,778评论 0 15
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,485评论 1 45
  • 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/...
    AuthorJim阅读 3,169评论 0 0
  • 前端面试题的简单整理,都只是大概回答,具体某些问题的具体理解后续会补上。 前端页面有哪三层构成,分别是什么?作用是...
    李欢li阅读 3,405评论 0 2
  • 雨 率性而执着 贴在脸上 扎进头发 欢快活泼 行走在雨中 感受雨 融进雨 让心在雨里奔跑 尘埃和浮躁纷纷落下 不牵...
    流浪猫70s阅读 2,241评论 1 8

友情链接更多精彩内容