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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
js面向对象的写法
Feb 19 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 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中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
带你了解python装饰器
2017/06/15 Python
单利模式及python实现方式详解
2018/03/20 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python类中self参数用法详解
2020/02/13 Python
聚网科技C++面试笔试题
2015/09/01 面试题
一年级语文教学反思
2014/02/13 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
促销活动总结报告
2014/04/26 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
五年级上册复习计划
2015/01/19 职场文书
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL