前言
文件上传如果加上进度条会有更好的用户体验（尤其是中大型文件），本文使用 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 ，安装以下依赖包：
代码部分
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命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
网友评论