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)}); }}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819651.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java小作业(9)----用函数实现斐波那契数列(第二遍)

代码&#xff1a; public class Main {public static void main(String[] args) {int n 20; // 你可以更改这个值来计算和输出前n个斐波那契数for (int i 0; i < n; i) {System.out.print(fibonacci(i) " ");}}public static int fibonacci(int n) {if (n <…

BackTrader 中文文档(一)

原文&#xff1a;www.backtrader.com/ 主页 欢迎来到 backtrader&#xff01; 原文&#xff1a;www.backtrader.com/ 一个功能丰富的 Python 框架&#xff0c;用于回测和交易 backtrader允许您专注于编写可重复使用的交易策略、指标和分析器&#xff0c;而不必花时间构建基础…

Android T多屏多显——应用双屏间拖拽移动功能(更新中)

功能以及显示效果简介 需求&#xff1a;在双屏显示中&#xff0c;把启动的应用从其中一个屏幕中移动到另一个屏幕中。 操作&#xff1a;通过双指按压应用使其移动&#xff0c;如果移动的距离过小&#xff0c;我们就不移动到另一屏幕&#xff0c;否则移动到另一屏。 功能分析…

振弦式渗压计的安装与防护:在水工建筑物中的关键应用

振弦式渗压计&#xff0c;作为一种高效的孔隙水压力或液体液位测量工具&#xff0c;广泛应用于水工建筑物、基岩内、测压管、钻孔、堤坝、管道和压力容器内。其安装和防护工作至关重要&#xff0c;直接关系到测量数据的准确性和仪器的使用寿命。本文将重点探讨振弦式渗压计在填…

RabbitMQ实战教程(1)

RabbitMQ 一、RabbitMQ介绍 1.1 现存问题 服务调用&#xff1a;两个服务调用时&#xff0c;我们可以通过传统的HTTP方式&#xff0c;让服务A直接去调用服务B的接口&#xff0c;但是这种方式是同步的方式&#xff0c;虽然可以采用SpringBoot提供的Async注解实现异步调用&…

Ue不消耗輸入

1、介紹 我們都知道ue裏面使用輸入時&#xff0c;都是在PlayerController裏面進行獲取&#xff0c; 使用官方的操作映射&#xff0c;軸映射&#xff0c;以及目前最新的增强型輸入 但是我們發現了一個問題 那就是輸入會被消耗 就是儅我鼠標按在一個按鈕上時 你另一個地方接受…

Elastic安装后 postman对elasticsearch进行测试

一、创建索引和mapping //id 字段自增id //good_sn 商品SKU //good_name 商品名称 //good_introduction 商品简介 //good_descript 商品详情 PUT http://IP:9200/shop { "mappings":{ "good":{ "properties":{ …

Qt显示对话框程序崩溃

问题描述 创建一个继承自QDialog的对话框DialogA&#xff0c;在主窗体显示之前进行显示&#xff0c;当执行DialogA的exec函数时&#xff0c;程序崩溃&#xff0c;提示&#xff1a;Critical error detected c0000374 问题排查 查看DialogA类中的内存创建是否存在异常&#xff0c…

UDF小白入门

UDF小白入门 创建一个函数(普通的Python函数)将成绩转换到考察等级 在PySpark中&#xff0c;使用UDF涉及有三个步骤&#xff1a; 前置&#xff1a;先创建一个spark dataframe from pyspark.sql import SparkSession from pyspark.sql.functions import *spark SparkSession.bu…

LabVIEW光学探测器板级检测系统

LabVIEW光学探测器板级检测系统 特种车辆乘员舱的灭火抑爆系统广泛采用光学探测技术来探测火情。光学探测器作为系统的关键部件&#xff0c;其探测灵敏度、响应速度和准确性直接关系到整个系统的运行效率和安全性。然而&#xff0c;光学探测器在长期使用过程中可能会因为灰尘污…

牛客Linux高并发服务器开发学习第一天

Linux开发环境搭建 安装Xshell 7远程连接虚拟机的Ubuntu 安装Xftp 7可以传输文件(暂时还没使用) 安装VMware Tools可以直接从Windows系统向虚拟机Linux系统拖拽文件实现文件交互。 安装CScode可以远程连接Linux系统进行代码的编写。&#xff08;Windows系统与Linxu系统公钥…

ActiveMQ 任意文件上传漏洞复现

一、使用弱口令登陆 ​ 访问 http://ip:8161/admin/ 进入admin登陆页面&#xff0c;使用弱口令登陆&#xff0c;账号密码皆为 admin&#xff0c;登陆成功后&#xff0c;headers中会出现验证信息 ​ 如&#xff1a; Authorization: Basic YWRtaW46YWRtaW4 # 二、利用PUT协议上…

STL体系结构与各容器基本介绍

STL体系结构与各容器基本介绍 STL体系结构基本容器序列式关联式&#xff08;查找更快&#xff09;其他&#xff08;不常用&#xff09;使用分配器 STL体系结构 六大模块 容器算法迭代器适配器仿函数分配器 基本容器 序列式 array c11新标准array<类型&#xff0c;大小&…

Linux-管道

目录 无名管道关闭未使用的管道文件描述符 管道对应的内存大小与shell命令进行通信&#xff08;popen&#xff09;命名管道FIFO创建FIFO文件打开FIFO文件 无名管道 管道是最早出现的进程间通信的手段。 管道的作用是在有亲缘关系的进程之间传递消息。所谓有亲缘关系&#xff…

MySQL中的SQL高级语句[二]

使用语言 MySQL 使用工具 Navicat Premium 16 代码能力快速提升小方法&#xff0c;看完代码自己敲一遍&#xff0c;十分有用 拖动表名到查询文件中就可以直接把名字拉进来以下是使用脚本方法&#xff0c;也可以直接进行修改中括号&#xff0c;就代表可写可不写 有些地方的代…

C++:moveforward

1.move 在C11添加了右值引用&#xff0c;并且不能使用左值初始化右值引用&#xff0c;如果想要使用左值初始化一个右值引用需要借助std::move()函数&#xff0c;使用std::move方法可以将左值转换为右值。使用这个函数并不能移动任何东西&#xff0c;而是和移动构造函数一样都具…

matches()` 方法

matches() 方法是 Matcher 类中的一个方法&#xff0c;用于尝试将整个输入序列与模式进行匹配。如果整个输入序列与模式完全匹配&#xff0c;则返回 true&#xff1b;否则返回 false。 下面是一个示例代码&#xff1a; java Pattern pattern Pattern.compile("\\d")…

IO——标准IO

1.1概念 标准IO&#xff1a;是在C库中定义的一组专门用于输入输出的函数。 1.2特点 &#xff08;1&#xff09;通过缓冲机制减少系统调用&#xff0c;提高效率 &#xff08;2&#xff09;围绕流操作&#xff0c;用FILE*描述 &#xff08;3&#xff09;标准IO默认打开三个流&a…

PCIe错误定义与分类

前言&#xff1a; PCI总线中定义两个边带信号&#xff08;PERR#和SERR#&#xff09;来处理总线错误。其中PERR#主要对应的是普通数据奇偶校检错误&#xff08;Parity Error&#xff09;&#xff0c;而SERR#主要对应的是系统错误&#xff08;System Error&#xff09;。具体如下…

vue定义公共方法

在vue文件中挂载公共方法&#xff0c;方便在页面中直接调用&#xff0c;使页面干净整洁&#xff0c;可读性高 1、创建公共方法的js文件&#xff0c;放入常用的函数 let commonFun {a: (c) > {return c} }export default commonFun2、在main.js文件中挂载 import commonF…