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

 更新时间:2020年03月27日 09:03:07   作者:alwaysVe  
这篇文章主要介绍了Nodejs文件上传、监听上传进度,本文通过实例代码给大家详细介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前言

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

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

效果 

 

前端部分

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文件上传、监听上传进度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • npm does not support Node.js问题的解决办法

    npm does not support Node.js问题的解决办法

    这篇文章主要给大家介绍了关于npm does not support Node.js问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    Node.js编写爬虫的基本思路及抓取百度图片的实例分享

    这篇文章主要介绍了Node.js编写爬虫的基本思路及抓取百度图片的实例分享,其中作者提到了需要特别注意GBK转码的转码问题,需要的朋友可以参考下
    2016-03-03
  • NodeJS制作爬虫全过程

    NodeJS制作爬虫全过程

    这篇文章主要介绍了NodeJS制作爬虫的全过程,包括项目建立,目标网站分析、使用superagent获取源数据、使用cheerio解析、使用eventproxy来并发抓取每个主题的内容等方面,有需要的小伙伴参考下吧。
    2014-12-12
  • nodejs版本过高导致vue-cli项目无法正常运行的几种解决方案

    nodejs版本过高导致vue-cli项目无法正常运行的几种解决方案

    这篇文章主要给大家介绍了关于nodejs版本过高导致vue-cli项目无法正常运行的几种解决方案,在项目中你可能需要用到的node版本太低,但是你所下的node版本是最新的,这时候就会报错,需要的朋友可以参考下
    2023-07-07
  • 基于Node.js的http模块搭建HTTP服务器

    基于Node.js的http模块搭建HTTP服务器

    这篇文章主要为大家介绍了基于Node.js的http模块来搭建HTTP服务器的示例过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-02-02
  • 浅谈Node.js:理解stream

    浅谈Node.js:理解stream

    本篇文章主要介绍了Node.js:stream,Stream在node.js中是一个抽象的接口,具有一定的参考价值,有需要的可以了解一下。
    2016-12-12
  • Nodejs调用Dll模块的方法

    Nodejs调用Dll模块的方法

    这篇文章主要介绍了Nodejs调用Dll模块的方法,在文中给大家提到了nodejs通过ffi调用dll模块的代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 全面了解Node事件循环

    全面了解Node事件循环

    这篇文章主要详细介绍了Node事件循环,文中的图片以及文字讲解可以帮助大家更好的了解事件循环,感兴趣的小伙伴可以看一看,多多参考一下
    2021-08-08
  • 10个Node.js库帮助你优化代码和简化开发

    10个Node.js库帮助你优化代码和简化开发

    这篇文章主要介绍了10个Node.js库帮助你优化代码和简化开发,其中包括处理数组、对象、字符串库Lodash,缓存数据处理库Node-cache,解析、操作和格式化日期和时间库Moment.js,Redis操作库,发送电子邮件库Nodemailer
    2023-05-05
  • nodejs实现截取上传视频中一帧作为预览图片

    nodejs实现截取上传视频中一帧作为预览图片

    这篇文章主要为大家详细介绍了nodejs实现截取上传视频中一帧作为预览图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12

最新评论