Nodejs文件上传、监听上传进度的代码


Posted in NodeJs onMarch 27, 2020

前言

文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用 Nodejs 配合前端完成这个功能。

前端我们使用 FormData 来作为载体发送数据。

效果 

Nodejs文件上传、监听上传进度的代码 

前端部分

HTML 部分 和 Js 部分

<input type="file" id="file" />
<!-- 进度条 -->
<progress id="progress" value="0" max="100"></progress>
// 获取 input file 的 dom 对象
const inputFile = document.querySelector('#file');

// 监听 change 事件
inputFile.addEventListener('change', function() {
 // 使用 formData 装载 file
 const formData = new FormData();
 formData.append('file', this.files[0]);
 
 // 上传文件
 upload(formData);
})

下面我们实现 upload 方法。

使用 XMLHttpRequest 的方式

const upload = ( formData ) => {
 const xhr = new XMLHttpRequest();
 // 监听文件上传进度
 xhr.upload.addEventListener('progress', function(e) {
 if (e.lengthComputable) {
 // 获取进度
 const progress = Math.round((e.loaded * 100) / e.total);
 
 document.querySelector('#progress').setAttribute('value', progress);
 }
 },false);
 
 // 监听上传完成事件
 xhr.addEventListener('load', ()=>{
 console.log(':smile:上传完成')
 }, false);
 
 xhr.open('post', 'http://127.0.0.1:3000/upload');
 xhr.send(formData); 
}

使用 jQuery 的 ajax 上传

jQuery 目前的使用量依然庞大,那么使用 jQuery 的 ajax 如何监听文件上传进度呢:

const upload = ( formData ) => {
 $.ajax({
 type: 'post',
 url: 'http://127.0.0.1:3000/upload',
 data: formData,
 // 不进行数据处理和内容处理
 processData: false,
 contentType: false,
 // 监听 xhr
 xhr: function() {
  const xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
  xhr.upload.addEventListener('progress', e => {
  const { loaded, total } = e;
  var progress = (loaded / total) * 100;
  document.querySelector('#progress').setAttribute('value', progress);
  },
  false
  );
  return xhr;
  }
 },
 success: function(response) {
  console.log('上传成功');
 }
 });
}

使用 axios 上传并监听进度

axios 使用量非常大,用它监听文件上传更简单,代码如下:

const upload = async ( formData ) => {

 let config = {
 // 注意要把 contentType 设置为 multipart/form-data
 headers: {
  'Content-Type': 'multipart/form-data'
 },
 
 // 监听 onUploadProgress 事件
 onUploadProgress: e => {
  const {loaded, total} = e;
  // 使用本地 progress 事件
  if (e.lengthComputable) {
  let progress = loaded / total * 100;
  document.querySelector('#progress').setAttribute('value', progress);
  }
 }
 };

 const { status } = await axios.post('http://127.0.0.1:3000/upload', formData, config);
 if (res.status === 200) {
  console.log('上传完成:grinning:');
 }
}

Nodejs 部分

这部分比较简单,其实就是单纯的文件上传,我们用 Koa 来实现.

环境搭建及依赖包安装

这里使用 koa2 ,安装以下依赖包:

  • koa
  • @koa/router: koa 的路由
  • @koa/cors:用于跨域
  • koa-body: 解析 body 数据
  • nodemon: 使用它启动服务,带有热更新

代码部分

const Koa = require('koa');
const Router = require('@koa/router');
const koaBody = require('koa-body');
const path = require('path');
const fs = require('fs');
const cors = require('@koa/cors');

const app = new Koa();
const router = new Router();

router.all('/upload', async ctx => {
 // 处理文件上传 
 const res = await dealFile(ctx);

 res && (ctx.body = {
 status: 200,
 msg: 'complete'
 });
});

// 中间件部分
app.use(cors());
app.use(
 koaBody({
 multipart: true,
 formidable: {
 maxFileSize: 2000 * 1024 * 1024 //最大2G
 }
 })
);
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

dealFile 方法处理上传的文件

出于性能考虑,操作 file 毫无疑问要使用 stream 。

我们要监听文件流 end 事件,由于无法在事件回调里返回响应,因为会报 404,所以需要使用 Promise 来封装一下,然后用 async、await

const dealFile = ctx => {
 const { file } = ctx.request.files;

 const reader = fs.createReadStream(file.path);
 const writer = fs.createWriteStream(
 // 文件上传到 image 文件夹中
 path.resolve(__dirname, './image', file.name)
 );

 return new Promise((resove, reject) => {
 
 reader.pipe(writer);
 
 reader.on('end', () => {
 resove(true);
 });
 
 reader.on('error', err => {
 throw err;
 })
 
 });
};

到这里就全部完成了。

这里注意一下:前端监听文件进度不需要后端有什么特殊处理,后端仅仅是做了文件流的写入而已。

总结

到此这篇关于Nodejs文件上传、监听上传进度的文章就介绍到这了,更多相关Nodejs文件上传、监听上传进度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

NodeJs 相关文章推荐
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
Jan 01 NodeJs
Nodejs爬虫进阶教程之异步并发控制
Feb 15 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
nodejs微信公众号支付开发
Sep 19 NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 NodeJs
nodejs基础应用
Feb 03 NodeJs
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
Sep 29 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
NodeJs搭建本地服务器之使用手机访问的实例讲解
May 12 NodeJs
nodejs 使用http进行post或get请求的实例(携带cookie)
Jan 03 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 NodeJs
nodejs如何在package.json中设置多条启动命令
Mar 16 #NodeJs
nodejs脚本centos开机启动实操方法
Mar 04 #NodeJs
nodejs制作小爬虫功能示例
Feb 24 #NodeJs
nodejs使用socket5进行代理请求的实现
Feb 21 #NodeJs
linux 下以二进制的方式安装 nodejs
Feb 12 #NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 #NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 #NodeJs
You might like
编译问题
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php适配器模式介绍
2012/08/14 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
JavaScript图片处理与合成总结
2018/03/04 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
定制FileField中的上传文件名称实例
2017/08/23 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
财产公证书
2014/04/10 职场文书
捐助倡议书范文
2014/04/15 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
小学新教师个人总结
2015/02/05 职场文书
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL