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的前后端分离的思考与实践(一)全栈式开发
Sep 26 NodeJs
nodejs 的 session 简单使用
Jun 06 NodeJs
nodejs基础应用
Feb 03 NodeJs
使用nodejs下载风景壁纸
Feb 05 NodeJs
详解nodeJS之二进制buffer对象
Jun 03 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 NodeJs
NodeJs通过async/await处理异步的方法
Oct 09 NodeJs
nodejs简单读写excel内容的方法示例
Mar 16 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 NodeJs
Nodejs中获取当前函数被调用的行数及文件名详解
Dec 12 NodeJs
详解Nodejs get获取远程服务器接口数据
Mar 26 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自带的进位制之间的转换函数
2013/06/08 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python解决八皇后问题示例
2018/04/22 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
详解python 内存优化
2020/08/17 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
会计实习期自我鉴定
2013/10/06 职场文书
电子专业求职信
2014/06/19 职场文书
赞美教师的句子
2019/09/02 职场文书
python函数的两种嵌套方法使用
2022/04/02 Python