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 动态生成方法的例子
Jul 22 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JS之相等操作符详解
Sep 13 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
PHP5常用函数列表(分享)
2013/06/07 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
js实现简单商品筛选功能
2021/02/02 Javascript
关于python中密码加盐的学习体会小结
2019/07/15 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
几个Shell Script面试题
2014/04/18 面试题
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
环保建议书400字
2014/05/14 职场文书
体育馆的标语
2014/06/24 职场文书
先进典型发言材料
2014/12/30 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python