Nodejs中文件上传、监听上传进度的示例分析-创新互联
这篇文章主要为大家展示了“Nodejs中文件上传、监听上传进度的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Nodejs中文件上传、监听上传进度的示例分析”这篇文章吧。
我们提供的服务有:成都网站建设、成都网站设计、微信公众号开发、网站优化、网站认证、宜秀ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的宜秀网站制作公司前言
文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用 Nodejs
配合前端完成这个功能。
前端我们使用 FormData
来作为载体发送数据。
效果
前端部分
HTML 部分 和 Js 部分
// 获取 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中文件上传、监听上传进度的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享文章:Nodejs中文件上传、监听上传进度的示例分析-创新互联
URL链接:http://pwwzsj.com/article/dichgc.html