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 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
vue cli 全面解析
Feb 28 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
详解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
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php简单分页类实现方法
2015/02/26 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
浅析php静态方法与非静态方法的用法区别
2016/05/17 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
Python下载网络小说实例代码
2018/02/03 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python dumps和loads区别详解
2020/02/04 Python
python实现控制台输出彩色字体
2020/04/05 Python
python中for in的用法详解
2020/04/17 Python
学生生病请假条范文
2014/02/16 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
婚礼父母致辞
2015/07/28 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang