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 特性检测并非浏览器检测
Jan 15 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 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
pw的一个放后门的方法分析
2007/10/08 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php简单生成随机数的方法
2015/07/30 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
jQuery控制cookie过期时间的方法
2015/04/07 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
解析Python编程中的包结构
2015/10/25 Python
使用python实现个性化词云的方法
2017/06/16 Python
总结python中pass的作用
2019/02/27 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
孔繁森观后感
2015/06/10 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
vue实现简单数据双向绑定
2021/04/28 Vue.js
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技