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实现多域名不同文件的调用方法
Jan 12 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
深入学习JavaScript 高阶函数
Jun 11 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
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和ACCESS写聊天室(六)
2006/10/09 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
javascript控制台详解
2015/06/25 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
德国网上宠物店:Zoobio
2018/05/23 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
技术总监管理岗位职责
2014/03/09 职场文书
学习三严三实心得体会
2014/10/13 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
旷课检讨书
2015/01/26 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
MySQL基础(二)
2021/04/05 MySQL
springboot+VUE实现登录注册
2021/05/27 Vue.js
vue实现列表垂直无缝滚动
2022/04/08 Vue.js