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动态加载三
Aug 22 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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类
2008/04/09 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
python处理json数据中的中文
2014/03/06 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
神经网络python源码分享
2017/12/15 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
建材业务员岗位职责
2013/12/08 职场文书
阳光体育活动方案
2014/02/16 职场文书
转让协议书
2015/01/27 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript
cypress测试本地web应用
2022/06/01 Javascript