当前位置: 首页 > 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日,在看到《今日崇州》 发布的航拍风光照片之后,这才方知笔者虽已寄居崇州“西川第一天”街子古镇养老逾五年,竟然不知崇州拥有如此之多的青山绿水,集生态、宜居、智慧、文化、旅游丰富资源于一…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...

【2025年】解决Burpsuite抓不到https包的问题

环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...

OpenLayers 分屏对比(地图联动)

注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

Selenium常用函数介绍

目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...

Go语言多线程问题

打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...