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 = und((e.loaded * 100) / e.total);
document.querySelector('#progress').setAttribute('value', progress);
}
},false);
// 监听上传完成事件
xhr.addEventListener('load', ()=>{
console.log(':smile：上传完成')
}, false);
xhr.open('post', '127.0.0.1:3000/upload');
xhr.send(formData);
}
使⽤ jQuery 的 ajax 上传
jQuery ⽬前的使⽤量依然庞⼤，那么使⽤ jQuery 的 ajax 如何监听⽂件上传进度呢：const upload = ( formData ) => {
$.ajax({
type: 'post',
url: '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('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.utes());
app.use(router.allowedMethods());
app.listen(3000);
dealFile ⽅法处理上传的⽂件
出于性能考虑，操作 file 毫⽆疑问要使⽤ stream 。
我们要监听⽂件流 end 事件，由于⽆法在事件回调⾥返回响应，因为会报 404，所以需要使⽤Promise来封装⼀下，然后⽤async、await
const dealFile = ctx => {
const { file } = quest.files;
const reader = fs.createReadStream(file.path);
const writer = fs.createWriteStream(
// ⽂件上传到 image ⽂件夹中
);
return new Promise((resove, reject) => {
reader.pipe(writer);
<('end', () => {
resove(true);
});
<('error', err => {
throw err;
})
});
};
到这⾥就全部完成了。
这⾥注意⼀下：前端监听⽂件进度不需要后端有什么特殊处理，后端仅仅是做了⽂件流的写⼊⽽已。
总结
到此这篇关于Nodejs⽂件上传、监听上传进度的⽂章就介绍到这了，更多相关Nodejs⽂件上传、监听上传进度内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。