webuploader后端开发要点
百度fex团队的webuploader是一个很方便的web页面文件上传轮子，可以很方便地集成到前端html和js里，当然了，后端需要咱们自己开发实现。比较遗憾的是webuploader现在已经从百度的fex主页移除了，该项目可能已经不再维护了。
关于后端，首先要实现以下几个服务：
1 文件（分片）上传 大文件是要分片上传的，不分片的话，受浏览器设置限制，最大似乎2GB，另外从客户端到服务器如果路上有nginx、F5等网关代理转发设施的话，也都会限制文件大小；另外都是小文件的话，你估计自己直接手传了，也没有必要用百度这个webuploader了
2 分片合并 前端把文件的所有分片都传完后，要向后端发起合并请求，后端开始将该文件的所有分片组装还原为原文件
3 合并进度查询 这个不是必须的，但是为了消减用户传完大文件后的等待焦虑，可以考虑在前端动态展示后端的合并进度，完成后再允许后续操作，否则，用户盲点可能导致后台任务冲突。
//前端提交时带入一个reqid参数，标识请求ID，在用户进入文件上传页面时随机生成
app.post('/upload_chunks', multer({dest: jargs.chunkDir}).array('file'), (req, res, next)=> {
let obj= req.body;
let chunkpath = req.files[0].path;// 原始片段在临时目录下的路径
let chunkid = (obj.chunk)?Number(obj.chunk):0;
let chunkitem=JSON.parse(JSON.stringify({"reqid":obj.reqid,"filename":obj.name,"chunkid":chunkid,"chunkpath":chunkpath}));
//维护一个列表保存当前已传输分片
filechunkpath.push(chunkitem);
res.json({'status': 1});
});
文件就存于临时目录，路径维护在列表中，效率最好。
//分片写入目标文件
function mergechunk(chunkpath, chunkid, targetFile){
let start = chunkid * jargs.chunkSize;
return new Promise((resolve,reject)=>{
pipeline( fs.createReadStream(chunkpath), fs.createWriteStream(targetFile, { flags:'r+', start:start }), (err) => { if (err) { reject(err);} fs.unlink(chunkpath,(err1)=>{ if (err1) reject(err1); resolve(); }); });
});
}
文件分片合并可以并发进行，每个分片写入目标的偏移量。
//提供合并查询服务
app.get('/query/:reqid', (req, res) => {
if (req.query.filename==undefined) {
let ready=filechunkpath.find(item=>(item.reqid==req.params.reqid));
let retcode=(ready!=undefined)?'0':'1';
res.json({'status':retcode});
}
else {
let target=filemergeprogress.find(itm=>((itm.reqid==req.params.reqid)&&(itm.filename==mydecode(req.query.filename))));
if (target==undefined) { res.json({'status':100}); }
else { res.json({'status':parseInt(target.done*100/target.total)}); }
}
});
原文地址：https://blog.csdn.net/dgiij/article/details/137781824
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！