node+multer实现图片上传的示例代码


Posted in Javascript onFebruary 18, 2020

最近在学习node实现一个后台管理系统,用到了图片上传,有一些小问题记录一下~

直接上代码,问题都记录在注释里~

const express = require('express');
const path = require('path');
const multer = require('multer');
const app = new express();

// 设置静态目录 第一个参数为虚拟的文件前缀,实际上文件系统中不存在
// 可以用public做为前缀来加载static文件夹下的文件了
app.use('/public', express.static(path.join(__dirname, './static')));

// 根据当前文件目录指定文件夹
const dir = path.resolve(__dirname, '../static/img');
// 图片大小限制KB
const SIZELIMIT = 500000;

const storage = multer.diskStorage({
  // 指定文件路径
  destination: function(req, file, cb) {
    // !!!相对路径时以node执行目录为基准,避免权限问题,该目录最好已存在*
    // cb(null, './uploads');
    cb(null, dir);
  },
  // 指定文件名
  filename: function(req, file, cb) {
    // filedname指向参数key值
    cb(null, Date.now() + '-' + file.originalname);
  }
});

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

app.post('/upload', upload.single('file'), (req, res) => {
  // 即将上传图片的key值 form-data对象{key: value}
  // 检查是否有文件待上传
  if (req.file === undefined) {
    return res.send({
      errno: -1,
      msg: 'no file'
    });
  }
  const {size, mimetype, filename} = req.file;
  const types = ['jpg', 'jpeg', 'png', 'gif'];
  const tmpTypes = mimetype.split('/')[1];
  // 检查文件大小
  if (size >= SIZELIMIT) {
    return res.send({
      errno: -1,
      msg: 'file is too large'
    });
  }
  // 检查文件类型
  else if (types.indexOf(tmpTypes) < 0) {
    return res.send({
      errno: -1,
      msg: 'not accepted filetype'
    });
  }
  // 路径可根据设置的静态目录指定
  const url = '/public/img/' + filename;
  res.json({
    errno: 0,
    msg: 'upload success',
    url
  });
});

app.listen(3000, () => {
  console.log('service start');
});

附上文档参考链接:
express框架
path模块
multer
最后再附赠一个node自动重启工具nodemon

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 #Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
JS实现百度搜索框关键字推荐
Feb 17 #Javascript
js实现百度淘宝搜索功能
Feb 17 #Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 #Javascript
Vue 中使用 typescript的方法详解
Feb 17 #Javascript
You might like
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript实现上传图片并预览的效果实现代码
2011/04/11 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
五好关工委申报材料
2014/05/31 职场文书
伊琍体标语
2014/06/25 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
小学中队长竞选稿
2015/11/20 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis