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

7.4.分块查找

一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...

Java入门学习详细版(一)

大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...

C++使用 new 来创建动态数组

问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展,其高效、便捷、协议开放、易于冗余等诸多优点,被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口,具有实时性、开放性,使用TCP/IP和IT标准,符合基于工业以太网的…...