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 相关文章推荐
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
php排序算法实例分析
2016/10/17 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
解析vue中的$mount
2017/12/21 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
tensorflow多维张量计算实例
2020/02/11 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
导游的职业规划书范文
2013/12/27 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
捐助倡议书范文
2014/04/15 职场文书
环保专项行动方案
2014/05/12 职场文书
公司合并协议书范本
2014/09/30 职场文书
热情服务标语
2014/10/07 职场文书
幼师自荐信范文
2015/03/06 职场文书