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

vue分片上传

<template><div><input type="file" id="input" /><button @click="uploadFile">上传</button></div>
</template><script lang="ts" setup>
let chunkSize=1024 * 1024,index=0;
const uploadFile=()=>{let inp=document.getElementById('input');const file=inp.files[0]const [fileName,ext] = file.name.split('.')let start=index * chunkSize // 切片起始if(start>file.size) returnconst blob= file.slice(start,start+chunkSize) // 切片const formData=new FormData()const blobName=`${fileName}${index}.${ext}` // 拼接片名const blobFile=new File([blob],blobName)console.log(blobFile)formData.append('file', blobFile)fetch('/uploadFile',{method: 'post',body: formData}).then(()=>{index++;uploadFile()})
}</script>
<template><h1>上传</h1><input type="file" @change="onChange" /><asd/>
</template><script setup lang="ts">
import  asd from './shangchuan.vue'
import SparkMD5 from "spark-md5";
const spark = new SparkMD5() //创建SparkMD5的实例const onChange=async (e:any)=>{const file=e.currentTarget.files[0] // 获取文件const chunks=createChunks(file,2 * 1024 * 1024) // 进行切片blob流const result=await hash(chunks,file) // 进行哈希加密得到16位字符
}
// 计算哈希
const hash=(chunks:any,files:any)=>{return new Promise(resolve => {const _read=(i:number)=>{if(i>=chunks.length){resolve(spark.end()) // 计算结束return // 读取完成}const blob=chunks[i] // 获取每一项const reader=new FileReader() // 解析每一块数据reader.readAsArrayBuffer(blob)const [fileName,ext] = files.name.split('.')const blobName=`${fileName}.${ext}` // 拼接片名// 转成File流const blobFile=new File([blob],blobName)const formData=new FormData() // 后端要的格式formData.append('file', blobFile)reader.onload=e=>{const bytes=e.target.result // 读取到的字节数组spark.append(bytes)fetch('/uploadFile',{method: 'post',body: formData}).then(()=>{_read(i+1)})}}_read(0)})
}// 切片
const createChunks=(file:any,chunkSize:any)=>{const resurl=[]for(let i=0;i<file.size;i+=chunkSize){resurl.push(file.slice(i,i+chunkSize))}return resurl
}
</script><style scoped></style>

相关文章:

vue分片上传

<template><div><input type"file" id"input" /><button click"uploadFile">上传</button></div> </template><script lang"ts" setup> let chunkSize1024 * 1024,index0; const upl…...

【大数据Hive】hive 表数据优化使用详解

目录 一、前言 二、hive 常用数据存储格式 2.1 文件格式-TextFile 2.1.1 操作演示 2.2 文件格式 - SequenceFile 2.2.1 操作演示 2.3 文件格式 -Parquet 2.3.1 Parquet简介 2.3.2 操作演示 2.4 文件格式-ORC 2.4.1 ORC介绍 2.4.2 操作演示 三、hive 存储数据压缩优…...

京东平台数据分析(京东销量):2023年9月京东吸尘器行业品牌销售排行榜

鲸参谋监测的京东平台9月份吸尘器市场销售数据已出炉&#xff01; 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;今年9月&#xff0c;京东吸尘器的销量为19万&#xff0c;环比下滑约12%&#xff0c;同比下滑约25%&#xff1b;销售额为1.2亿&#xff0c;环比下滑约11%&…...

基于springboot实现休闲娱乐代理售票平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现休闲娱乐代理售票平台系统演示 摘要 网络的广泛应用给生活带来了十分的便利。所以把休闲娱乐代理售票管理与现在网络相结合&#xff0c;利用java技术建设休闲娱乐代理售票系统&#xff0c;实现休闲娱乐代理售票的信息化。则对于进一步提高休闲娱乐代理售票管…...

jvm对象内存划分

写此篇博客源于面试问到内存分配的细节&#xff0c;然后不明白问的是什么。回过头发现以前看过这块内容&#xff0c;只是有些印象&#xff0c;但是无法描述清楚。 额外概念了解 jvm内存空间是逻辑上连续的虚拟地址空间&#xff08;虚拟内存中的概念&#xff09;映射到物理内存…...

网络原理之TCP/IP

文章目录 应用层传输层UDP协议TCP协议TCP 的工作机制1. 确认应答2. 超时重传3. 连接管理TCP 的建立连接的过程(三次握手),和断开连接的过程(四次挥手)TCP 断开连接, 四次挥手 3. 滑动窗口5. 流量控制6. 拥塞控制7. 延时应答8. 捎带应答9. 面向字节流10. 异常情况 本章节主要讨论…...

Docker:数据卷挂载

Docker&#xff1a;数据卷挂载 1. 数据卷2. 数据卷命令补充 1. 数据卷 数据卷(volume)是一个虚拟目录&#xff0c;是容器内目录与宿主机目录之间映射的桥梁。 Nginx容器有自己独立的目录(Docker为每个镜像创建一个独立的容器,每个容器都是基于镜像创建的运行实例)&#xff0c;…...

你会处理 go 中的 nil 吗

对于下面这段代码&#xff0c;我们知道 i 实际上的值就是 nil&#xff0c;所以 i nil 会生效 func main() {var i *int nilif i nil {fmt.Println("i is nil") // i is nil} }现在换一种写法&#xff0c;我们将 i 的类型改成 interface{}&#xff0c;i nil 依然…...

高级深入--day42

注意&#xff1a;模拟登陆时&#xff0c;必须保证settings.py里的 COOKIES_ENABLED (Cookies中间件) 处于开启状态 COOKIES_ENABLED True 或 # COOKIES_ENABLED False 策略一&#xff1a;直接POST数据&#xff08;比如需要登陆的账户信息) 只要是需要提供post数据的&#xff…...

mysql 计算两个坐标距离

方式一&#xff1a;st_distance_sphere 计算结果单位米 SELECT *, st_distance_sphere(point(lng,lat),point(lng,lat)) as distance FROM table mysql 版本5.7 以上 方式二&#xff1a;st_distance 计算结果单位是度 SELECT *, (st_distance(point(lng,lat),point(lng4,lat…...

String、StringBuffer、StringBuilder和StringJoiner

String、StringBuffer、StringBuilder和StringJoiner都是用于处理字符串的类&#xff0c;但它们在性能和使用方式上有一些区别。 String String是不可变的类&#xff0c;一旦创建就不能被修改。对String进行拼接或修改时&#xff0c;实际上是创建了一个新的String对象。适用于…...

【数据结构】插入排序

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 直接插入、希尔排序 1. 什么是排序2…...

Photoshop使用笔记总目录

Photoshop基础学习之工具学习 一、【Photoshop界面认识】 二、【 Photoshop常用快捷键】 三、【色彩模式与颜色填充】 四、【选区】 五、【视图】 六、【常用工具组】 七、【套索工具组】 八、【快速选择工具组】 九、【裁剪工具组】 十、【图框工具组】 十一、【吸取…...

最近面试遇到的高频面试题

大家好&#xff0c;我是 jonssonyan 互联网寒冬&#xff1f;金九银十真的不存在了么&#xff1f;虽说现在行情是差了一些&#xff0c;面试机会少了一些&#xff0c;但是大部分公司还是或多或少的招人&#xff0c;春招秋招都在进行。有人离职就有人入职。所以如果你还没约到面试…...

负载均衡有哪些算法,分别在nginx中如何配置?

负载均衡是用于分发传入的网络流量到多个后端服务器的技术&#xff0c;以确保无单个服务器过载&#xff0c;从而提高应用的可用性和响应时间。以下是一些常用的负载均衡算法&#xff0c;以及如何在Nginx中配置它们&#xff1a; 轮询 (Round Robin)&#xff1a; 简介&#xff1a…...

Starknet开发工具

1. 引言 目前Starknet的开发工具流可为&#xff1a; 1&#xff09;Starkli&#xff1a;音为Stark-lie&#xff0c;为替换官方starknet-CLI的快速命令行接口。Starkli为单独的接口&#xff0c;可独自应用&#xff0c;而不是其它工具的组件。若只是想与Starknet交互&#xff0…...

Unity地面交互效果——1、局部UV采样和混合轨迹

大家好&#xff0c;我是阿赵。   这期开始&#xff0c;打算介绍一下地面交互的一些做法。 比如&#xff1a; Unity引擎制作沙地实时凹陷网格的脚印效果 或者&#xff1a; Unity引擎制作雪地效果 这些效果的实现&#xff0c;需要基于一些基础的知识。所以这一篇先介绍一下简单…...

基于STM32的示波器信号发生器设计

**单片机设计介绍&#xff0c;基于STM32的示波器信号发生器设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序文档 六、 文章目录 一 概要 基于STM32的示波器信号发生器是一种高性能的电子仪器&#xff0c;用于测试和分析电路中的电信号。在该系统中&a…...

案例分析大汇总

案例分析心得 2018-2022年的案例分析考试内容汇总&#xff08;近五年&#xff09; 架构设计题型 软件系统建模 数据库 Web 系统设计 2018年 胖/瘦客户端 C/S 架构非功能性需求 数据流图DFDE-R图Essential Use Cases(抽象用例)&#xff0c;Real Use Cases(基础用例)信息工…...

MVCC(Multi-Version Concurrency Control,多版本并发控制)

是一种数据库管理系统中常用的并发控制技术&#xff0c;用于处理多个事务同时访问数据库数据时的数据一致性和隔离性。MVCC的主要目标是允许多个事务并发执行&#xff0c;同时保持数据的一致性&#xff0c;避免数据丢失或不一致。 MVCC 的核心思想是为每个事务维护多个版本的数…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

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

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

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...