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 相关文章推荐
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 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
无线电的诞生过程
2021/03/01 无线电
Zend的MVC机制使用分析(一)
2013/05/02 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Javascript调用C#代码
2011/01/17 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python对象及面向对象技术详解
2016/07/19 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python代码实现KNN算法
2017/12/20 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python collections模块的使用
2020/10/16 Python
Python模块常用四种安装方式
2020/10/20 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
打架检讨书400字
2014/01/17 职场文书
伦敦奥运会口号
2014/06/13 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
人与自然观后感
2015/06/16 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书