-
Nodejs文件上传、监听上传进度(node实现文件上传)
- 网站名称:Nodejs文件上传、监听上传进度(node实现文件上传)
- 网站分类:技术文章
- 收录时间:2025-07-16 15:39
- 网站地址:
“Nodejs文件上传、监听上传进度(node实现文件上传)” 网站介绍
文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用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('上传完成')
}, 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('上传完成');
}
}
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;
})
});
};
到这里就全部完成了。
这里注意一下:前端监听文件进度不需要后端有什么特殊处理,后端仅仅是做了文件流的写入而已。
作者:Ve
链接:
https://juejin.im/post/5e7ca27df265da42ac0294e5
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多相关网站
- Pug 3.0.0正式发布,不再支持 Node.js 6/8
- topjui(easyui) filebox多图上传(easyui 文件上传)
- SpringBoot使用ElasticSearch做文档对象的持久化存储?
- 文件上传,排版是伤(文档上传是什么意思)
- 国外免费公共云存储产品有哪些(上)?
- php手把手教你做网站(三十)上传图片生成缩略图
- SPRINGBOOT 实现大文件上传下载、分片、断点续传教程
- 从致远OA-ajax.do任意文件上传漏洞复现到EXP编写
- Axure高保真教程:上传本地图片(axure如何发布)
- 图片上传并回显Ajax异步篇(ajax发送图片)
- 网页中实现文件上传下载的三种解决方案(推荐)
- 使用jQuery ajaxFileUpload+servlet实现文件上传
- 最近发表
- 标签列表
-
- mydisktest_v298 (35)
- sql 日期比较 (33)
- document.appendchild (35)
- 头像打包下载 (35)
- 二调符号库 (23)
- acmecadconverter_8.52绿色版 (25)
- 梦幻诛仙表情包 (36)
- 魔兽模型 (23)
- java面试宝典2019pdf (26)
- disk++ (30)
- vncviewer破解版 (20)
- word文档批量处理大师破解版 (19)
- pk10牛牛 (20)
- 加密与解密第四版pdf (29)
- iteye (26)
- parsevideo (22)
- ckeditor4中文文档 (20)
- centos7.4下载 (32)
- cuda10.1下载 (22)
- intouch2014r2sp1永久授权 (33)
- usb2.0-serial驱动下载 (24)
- 魔兽争霸全图 (21)
- jdk1.8.0_191下载 (27)
- axure9注册码 (30)
- gitlab日志 (20)