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

时间: 2020-03-26

基于nodejs+express(4.x+)实现文件上传功能

Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新.基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术.在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代.带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响:但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码. 通过一段时间的查阅资料.摸索,我发现实现上传的方式有:1.expres

nodejs+express实现文件上传下载管理网站

nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异

使用nodejs+express实现简单的文件上传功能

1.建立express项目 express -e nodejs-uploadfile 2.下载multer中间件 npm i multer or yarn multer 3.在routes/index.js中引用multer,由于还要使用到文件操作,还要引用fs模块,并指定文件上传目录 const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads' 单文件上传: index.h

nodejs 终端打印进度条实例代码

1. 场景导入 当我们对大量文件进行批量处理的时候(例如:上传/下载.保存.编译等),常常希望知道当前进展如何,或者失败(成功)的任务有多少:当我们的代码或程序已经发布,用户在执行安装的过程中,一个合适的(终端/命令行)进度条可以准确反映安装的步骤和进程,提升程序的可用性,一定程度缓解用户在等待中的烦恼-- 2. 基本原理 首先,在终端打印出文本是件比较容易的事情.那么使用简单的文本和符号,就够自己拼凑出命令行的效果(下面例子): 文件已上传: 43.60% ██████████████████

NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=

Ajax异步文件上传与NodeJS express服务端处理

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"

ASP.NET Core单文件和多文件上传并保存到服务端的方法

前言: 在我们日常开发中,关于图片,视频,音频,文档等相关文件上传并保存到服务端中是非常常见的一个功能,今天主要是把自己在开发中常用的两种方式记录下来方便一下直接使用,并且希望能够帮助到有需要的同学! 一.配置ASP.NET Core中的静态文件: 简单概述: 在ASP.NET Core应用中静态资源文件需要进行相应的配置才能够提供给客户端直接使用. 详情描述请参考官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/st

一些常用弹出窗口/拖放/异步文件上传等实用代码

久不出技术类文章,我都忘了自己是一程序员啦......今天写一点工作中遇到的东西,大家共同学习,反正也比较浅显了. 弹出窗口 我们在工作中,经常会碰到弹出窗口类应用,有时候还需要一点遮盖层: 这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了 主要代码如下: 复制代码 代码如下: //弹出层剧中 function popup(popupName) { var _scrollHeight = $(document).scrollTop

js HTML5 Ajax实现文件上传进度条功能

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

PHP+iFrame实现页面无需刷新的异步文件上传

本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧.分享给大家供大家参考.具体分析如下: 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了. 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多. 先来给初学者补补基础知识: 1. 在iframe标签一般会指定其name特性以于标识: 2. 在form表单中通过

基于ajax实现文件上传并显示进度条

下面给大家分享下基于ajax实现文件上传并显示进度条.在jsp部分,需要设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,作为隐藏.form的target等于iframe的name; 在servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到sessi

利用SpringMVC和Ajax实现文件上传功能

个人根据相关资料实现利用SpringMVC和Ajax实现文件上传功能: 环境: 1.JDK1.7 2.maven3.3.9 3.Tomcat7 第一步: 导入相关jar包: 第二步: 配置springmvc-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xml

基于jsp的AJAX多文件上传的实例

最近的项目开发中,遇到了一个多文件上传的问题,即在不刷新页面的情况下,上传多个文件至服务器.现总结分享如下: 本文主要采用了基于jsp的ajax,jquery,servlet等技术. 1.upload.jsp 点击上传时,调用对应的fileupload函数,通过ajax将文件异步传送到servlet中处理.注意在文件上载时,所使用的编码类型应当是"multipart/form-data",它既可以发送文本数据,也支持二进制数据上载. <%@ page language="

基于HTML5 Ajax实现文件上传并显示进度条

本文实例讲解了ajax上传文件及进度条的实现方法,分享给大家供大家参考,具体内容如下 效果图: html5上传是同步上传的方式,所以能够实现进度条的显示. 1.上传文件: 首先我们用ajax来取得<input type="file" id="file_upload">的file对象: var file = null; var input = $("#file_upload"); //文件域选择文件时, 执行readFile函数 inp

springMVC+ajax实现文件上传且带进度条实例

前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input ty