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 相关文章推荐
jquery cookie插件代码类
May 26 Javascript
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
Ionic快速安装教程
Jun 03 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
手把手教你实现 Promise的使用方法
Sep 02 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python生成密码库功能示例
2017/05/23 Python
python实现按长宽比缩放图片
2018/06/07 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Django框架验证码用法实例分析
2019/05/10 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
python 弧度与角度互转实例
2020/04/15 Python
劳资人员岗位职责
2013/12/19 职场文书
十周年庆典策划方案
2014/06/03 职场文书
财务会计岗位职责
2015/02/03 职场文书
python文件目录操作之os模块
2021/05/08 Python
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers