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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
使用p5.js临摹动态图片
Nov 04 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
python常见的格式化输出小结
2016/12/15 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python执行使用shell命令方法分享
2017/11/08 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python书籍信息爬虫实例
2018/03/19 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
python列表生成器迭代器实例解析
2019/12/19 Python
详解Python中namedtuple的使用
2020/04/27 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
思想品德自我鉴定
2013/10/12 职场文书
原材料检验岗位职责
2014/03/15 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
搞笑结婚保证书
2015/05/08 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书