Node.js上传文件功能之服务端如何获取文件上传进度


Posted in Javascript onFebruary 05, 2018

内容概述

multer是常用的Express文件上传中间件。服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题。在SF上也有同学问了类似问题《nodejs multer有没有查看文件上传进度的方法?》。稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考。

下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项。

利用progress-stream获取文件上传进度

如果只是想在服务端获取上传进度,可以试下如下代码。注意,这个模块跟Express、multer并不是强绑定关系,可以独立使用。

var fs = require('fs');
var express = require('express');
var multer = require('multer');
var progressStream = require('progress-stream');
var app = express();
var upload = multer({ dest: 'upload/' });
app.post('/upload', function (req, res, next) {
  // 创建progress stream的实例
  var progress = progressStream({length: '0'}); // 注意这里 length 设置为 '0'
  req.pipe(progress);
  progress.headers = req.headers;
  // 获取上传文件的真实长度(针对 multipart)
  progress.on('length', function nowIKnowMyLength (actualLength) {
    console.log('actualLength: %s', actualLength);
    progress.setLength(actualLength);
  });
  // 获取上传进度
  progress.on('progress', function (obj) {    
    console.log('progress: %s', obj.percentage);
  });
  // 实际上传文件
  upload.single('logo')(progress, res, next);
});
app.post('/upload', function (req, res, next) {
  res.send({ret_code: '0'});
});
app.get('/form', function(req, res, next){
  var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
  res.send(form);
});
app.listen(3000);

如何获取上传文件的真实大小

multipart类型,需要监听length来获取文件真实大小。(官方文档里是通过conviction事件,其实是有问题的)

// 获取上传文件的真实长度(针对 multipart)
progress.on('length', function nowIKnowMyLength (actualLength) {
  console.log('actualLength: %s', actualLength);
  progress.setLength(actualLength);
});

3、关于progress-stream获取真实文件大小的bug?

针对multipart文件上传,progress-stream 实例子初始化时,参数length需要传递非数值类型,不然你获取到的进度要一直是0,最后就直接跳到100。

至于为什么会这样,应该是 progress-steram 模块的bug,看下模块的源码。当length是number类型时,代码直接跳过,因此你length一直被认为是0。

tr.on('pipe', function(stream) {
  if (typeof length === 'number') return;
  // Support http module
  if (stream.readable && !stream.writable && stream.headers) {
    return onlength(parseInt(stream.headers['content-length'] || 0));
  }
  // Support streams with a length property
  if (typeof stream.length === 'number') {
    return onlength(stream.length);
  }
  // Support request module
  stream.on('response', function(res) {
    if (!res || !res.headers) return;
    if (res.headers['content-encoding'] === 'gzip') return;
    if (res.headers['content-length']) {
      return onlength(parseInt(res.headers['content-length']));
    }
  });
});

总结

以上所述是小编给大家介绍的Node.js上传文件功能之服务端如何获取文件上传进度,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
js消除图片小游戏代码
Dec 11 Javascript
javascript实现最长公共子序列实例代码
Feb 05 #Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 #Javascript
基于vue 动态加载图片src的解决方法
Feb 05 #Javascript
vue2.0 datepicker使用方法
Feb 04 #Javascript
js数组常用最重要的方法
Feb 04 #Javascript
jQuery Dom元素操作技巧
Feb 04 #jQuery
Vue的事件响应式进度条组件实例详解
Feb 04 #Javascript
You might like
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
js 居中漂浮广告
2010/03/21 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
js中的this关键字详解
2013/09/25 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
javascript正则表达式模糊匹配IP地址功能示例
2017/01/06 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python3.5运算符操作实例详解
2019/04/25 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
初一学生期末评语
2014/04/24 职场文书
企业承诺书格式
2014/05/21 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
篮球赛新闻稿
2015/07/17 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Java并发编程必备之Future机制
2021/06/30 Java/Android
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
JavaScript流程控制(循环)
2021/12/06 Javascript