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 相关文章推荐
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
JavaScript知识点整理
Dec 09 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
js获取视频时长代码
2014/04/10 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
React实现todolist功能
2020/12/28 Javascript
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
使用python为mysql实现restful接口
2018/01/05 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python多进程fork()函数详解
2019/02/22 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
python3 实现的对象与json相互转换操作示例
2019/08/17 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
财务主管岗位职责
2014/02/28 职场文书
志愿者宣传口号
2014/06/17 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2014年人事科工作总结
2014/11/19 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server