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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Vue仿支付宝支付功能
May 25 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
vue实现移动端省市区选择
Sep 27 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
js+css实现全屏侧边栏
Jun 16 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP常用函数小技巧
2008/09/11 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js获取url中"?"后面的字串方法
2014/05/15 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
Python3字符串学习教程
2015/08/20 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
支部书记四风对照材料
2014/08/28 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS