node文件上传功能简易实现代码


Posted in Javascript onJune 16, 2017

找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址

1. 开始

开始第一步,自然就是安装模块,不多说

npm install multer --save

这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息。

以单文件上传为例,req.file 返回一个对象:

{
   "fieldname":"avatar",  #前端上传文件input的name
   "originalname":"Wx.php",  #本地文件名
   "encoding":"7bit",  #文件编码类型
   "mimetype":"text/php",  #文件类型
   "destination":"uploads/",  #上传根目录
   "filename":"1497286037422Wx.php",  #上传后文件名
   "path":"uploads/1497286037422Wx.php",  #文件路径
   "size":18174  #文件大小
}

该对象的 key 值是固定的,velue 值根据配置生成,用于实现相关逻辑

2. 实现

实现分两部分,前端和后端

前端

前端就是普通的写法,form 表单提交

<form action="/test/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <input type="submit" name="提交">
</form>

切记,enctype="multipart/form-data" 这个属性一定要加上,否则后台接收不到文件。

后端

首先我们新建配置文件,upload.js

// upload.js

var multer = require('multer');  # 引入模块

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相当于创建一个磁盘存储引擎,配置文件上传路径,文件名等,可控性更高。

destination  # 设置文件上传路径
filename    # 重命名文件

然后新建路由接收文件,file.js

// file.js 

var express = require('express');
var router = express.Router();

// 引入配置文件
var upload = require('../config/upload');

router.post('/upload', upload.single('avatar'), function(req, res, next) {
  res.send(req.file);
});

module.exports = router;

file.js 中 upload.single() 方法表示接受单文件,常用的有

upload.single(fname);  // 接收单文件
upload.array(fname[, maxCount])  //接收多文件,maxCount表示接收最大数量

fname 是前端 <input type="file" name="fname"> 的 name 值

基本的上传文件方法就这些了,当然还有很多的配置参数之类的设置,要参考 GitHub 说明,地址在开头,需要者自行查阅

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

Javascript 相关文章推荐
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
js继承实现方法详解
Dec 16 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
详解VUE 数组更新
Dec 16 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
keras导入weights方式
2020/06/12 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
八年级物理教学反思
2014/01/19 职场文书
大学生找工作求职信
2014/07/09 职场文书
感恩教育观后感
2015/06/17 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python