当前位置: 首页 > news >正文

前端实现边下载文件边上传

问题记录原因:

因为需要实现网络文件的上传,结果是由前端实现,方式是一边下载,一遍上传文件,小文件直接上传,大文件进行切片,切片大小和下载大小有关,特此记录。

1.实现方案

fetch进行网络连接的下载,在请求的返回对象中调用response.body.getReader(),这里是读取文件流,便于监听,读取的方式为reader.read(),它的返回对象中包含,文件对象和完成状态,这样就能实现,循环执行下载的动作知道,状态为完成停止。

2.步骤代码

1)下载

const response: any = await fetch(downloadUrl);
const reader = response.body.getReader();
// 读取响应的文件字节数
const contentLength = +response.headers.get('Content-Length');

2)上传

使用MD5计算文件的hash进行分片上传

let receivedLength = 0;
// 分片上传的话需要计算每一片文件的hash,我们使用MD5
const spark = new SparkMD5.ArrayBuffer();
while(true) {const {done, value} = await reader.read();if (done) {// 计算整个文件的hashconst finalHash = spark.end();console.log('下载&上传完成:', finalHash);break;}// 更新整个文件的hashspark.append(value);receivedLength += value.length;console.log(`下载进度: ${receivedLength} / ${contentLength}`);// 创建一个新的SparkMD5实例来处理当前分片const chunkHash = SparkMD5.ArrayBuffer.hash(value); // 计算当前分片的hashconst offset = receivedLength - value.length;// console.log(contentLength, offset, chunkHash, hash, value.length);// 上传这个分片,这里执行接口...
}

 contentLength, offset, chunkHash, hash, value.length,这些参数是分片上传所需要的,依次是:

文件的大小,分片的偏移量,每一片的hash(这个参数可选),整个文件的hash(这个需要提前计算出来),每一个分片的大小;

3.拓展

1)计算大文件的hash

可以参考:【文件比较】前端上传比较内容及名字-CSDN博客

2)content-type类型与文件类型的对应关系

不全面,只是涵盖大多文件类型:

const getFileTypeByContentType = (contentType: string) => {let type = ['image/jpeg', 'image/pjpeg'].includes(contentType) ? 'jpg':['image/png'].includes(contentType) ? 'png':['image/gif'].includes(contentType) ? 'gif':['image/svg+xml'].includes(contentType) ? 'svg':['video/mp4'].includes(contentType) ? 'mp4':['video/quicktime'].includes(contentType) ? 'mov':['text/html'].includes(contentType) ? 'html':['text/markdown'].includes(contentType) ? 'md':['text/plain'].includes(contentType) ? 'txt':['text/csv'].includes(contentType) ? 'csv':['application/json'].includes(contentType) ? 'json':['application/x-yaml', 'text/yaml'].includes(contentType) ? 'yaml':['application/pdf'].includes(contentType) ? 'pdf':['application/msword'].includes(contentType) ? 'doc':['application/vnd.openxmlformats-officedocument.wordprocessingml.document'].includes(contentType) ? 'docx':['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'].includes(contentType) ? 'xlsx':['application/vnd.ms-excel'].includes(contentType) ? 'xls':['application/vnd.openxmlformats-officedocument.presentationml.presentation'].includes(contentType) ? 'pptx':['application/zip'].includes(contentType) ? 'zip':'';return type
}

相关文章:

前端实现边下载文件边上传

问题记录原因: 因为需要实现网络文件的上传,结果是由前端实现,方式是一边下载,一遍上传文件,小文件直接上传,大文件进行切片,切片大小和下载大小有关,特此记录。 1.实现方案 fetc…...

滑线变阻器的优缺点是什么?

滑线变阻器是常见的电子元件,主要用于调节电路中的电阻值,从而达到改变电流、电压的目的。它的主要优点是结构简单、操作方便、成本低,因此在各种电子设备中都有广泛的应用。然而,滑线变阻器也存在一些缺点,主要表现在…...

K8s大模型算力调度策略的深度解析

随着大数据和人工智能技术的飞速发展,Kubernetes(简称K8s)作为容器编排的领军者,在支撑大规模模型训练和推理方面扮演着越来越重要的角色。在大模型算力的调度过程中,如何高效、合理地分配和管理资源成为了一个亟待解决…...

Unity Transform组件实现动画:基础与进阶技巧

在Unity中,Transform组件是控制游戏对象(GameObject)位置、旋转和缩放的核心组件。通过编程控制Transform组件,开发者可以创建各种动画效果。本文将介绍如何使用Transform组件实现动画,从基础的运动到更高级的动画技巧…...

基于深度学习的图像与文本结合

基于深度学习的图像与文本结合的研究领域,是近年来多模态学习(Multimodal Learning)中非常活跃的方向。该领域涉及到如何将图像和文本两种不同类型的数据进行融合和处理,从而实现更智能的任务和应用。以下是对这一领域的详细介绍&…...

windows安全加固

一、补丁管理 及时安装补丁:定期检查和安装Windows系统及其应用程序的更新和补丁,以修复已知的安全漏洞。可以使用Windows Update功能或第三方补丁管理工具来实现。补丁管理策略:对于无法直接访问互联网的服务器,可以建立内部补丁…...

网络安全是什么?怎么入门网络安全?

一、网络安全的定义 网络安全,简单来说,就是保护网络系统中的硬件、软件以及其中的数据不因偶然或恶意的原因而遭到破坏、更改、泄露,保障系统连续可靠正常地运行,网络服务不中断。 随着信息技术的飞速发展,网络安全的…...

语义分割介绍

1. 定义 语义指具有人们可用语言探讨的意义,分割指图像分割。 语义分割(semantic segmentation)能够将整张图的每个部分分割开,使每个部分都有一定类别意义(语义),让计算机可以理解图像。 语义分割是以描边的形式&…...

Unity Editor免登录启动 无需UnityHub

Unity Editor免登录启动项目无需UnityHub,命令行启动项目。需要开发Unity项目,就必须使用 Unity Hub来管理你的项目,还必须要申请一个免费许可,确实有点麻烦,官方已经提供了相关命令行,来直接使用Unity Edi…...

Redis实战篇(黑马点评)笔记总结

一、配置前后端项目的初始环境 前端: 对前端项目在cmd中进行start nginx.exe,端口号为8080 后端: 配置mysql数据库的url 和 redis 的url 和 导入数据库数据 二、登录校验 基于Session的实现登录(不推荐) &#xf…...

vulntarget-b

实际部署之后centos7 的ip有所变动分别是 :192.168.127.130以及10.0.20.30 Centos7 老规矩还是先用fscan扫一下服务和端口,找漏洞打 直接爆出来一个SSH弱口令…,上来就不用打了,什么意思??? 直接xshell…...

Axure Web端元件库:构建高效互动网页的基石

在快速迭代的互联网时代,Web设计与开发不仅追求视觉上的美感,更注重用户体验的流畅与功能的强大。Axure RP,作为一款专业的原型设计工具,凭借其强大的交互设计能力和丰富的元件库,成为了众多UI/UX设计师、产品经理及前…...

mac OS matplotlib missing from font(s) DejaVu Sans

如果能搜索到这篇文章,我猜你遇到了和我一样的问题:matplotlib绘图中文乱码。如下: 出现这个问题的原因是:matplotlib使用的字体列表中默认没有中文字体。 这里说一种解决方案:我们可以在文件中手动指定matplotlib使用…...

在 .NET 中使用 Elasticsearch:从安装到实现搜索功能的完整指南

在 .NET 中使用 Elasticsearch Elasticsearch 是一个强大的搜索和分析引擎,广泛应用于处理大规模数据和实时搜索需求。本文将介绍如何在 .NET 环境下使用 Elasticsearch,帮助开发者快速上手并实现基本的搜索功能。 1. 环境准备 首先,我们需…...

Ecovadis认证的步骤需要怎么做?

Ecovadis是一家提供企业可持续发展评估和认证服务的机构。如果您想获得Ecovadis的认证辅导,可以按照以下步骤进行: 了解Ecovadis认证要求:在开始准备之前,先仔细研究Ecovadis的认证要求和标准。您可以访问Ecovadis的官方网站&…...

git sendemail使用

教程参考: git-send-email - 以电子邮件形式发送补丁集 1、安装git-email 2、配置 SMTP 服务器 git config --global sendemail.smtpserver smtp.163.com git config --global sendemail.smtpserverport 465 git config --global sendemail.smtpuser xxxxxx163.c…...

【React】package.json 文件详解

文章目录 一、package.json 文件的基本结构二、package.json 文件的关键字段1. name 和 version2. description3. main4. scripts5. dependencies 和 devDependencies6. repository7. keywords8. author 和 license9. bugs 和 homepage 三、package.json 文件的高级配置1. 配置…...

【嵌入式开发】Keil下载安装

目录 前言 一、Keil的安装 Keil官网 微控制器开发套件版本说明 前言 作为最常见的单片机程序编辑工具,keil有绝对的占有率。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等在内的完整开发方案,通过一个集成开发环境&am…...

【vluhub】elasticsearch漏洞

Elasticsearch介绍 是Apache旗下的一个开源的、分布式、RESTful的搜索和分析引擎,适用于java语言项目 默认端口9200 kali中搭建ElasticHD, 即可未授权绕过ES可视化界面 直通车 https://github.com/360EntSecGroup-Skylar/ElasticHD/releases/download/1.4/elas…...

七言-绝美崇州

题记 今天,2024年07月30日,在看到《今日崇州》 发布的航拍风光照片之后,这才方知笔者虽已寄居崇州“西川第一天”街子古镇养老逾五年,竟然不知崇州拥有如此之多的青山绿水,集生态、宜居、智慧、文化、旅游丰富资源于一…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...

鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 (1)输入单引号 (2)万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

离线语音识别方案分析

随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...