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

vue3+vue-simple-uploader实现大文件上传

vue-simple-uploader本身是基于vue2实现,如果要使用vue3会报错。如何在vue3中使用,可参考我的另一篇文章:解决vue3中不能使用vue-simple-uploader__Jyann_的博客-CSDN博客

一.实现思路

  1. 使用vue-simple-uploader组件的uploader组件,设置自动上传为false,即可开启手动上传。:autoStart=false
  2. 设置上传参数options中的数据(target、chunkSize,fileParameterName、maxChunkRetries、testChunks、checkChunkUploadedByResponse、parseTimeRemaining);
  3. 设置testChunk:true组件会自动发起同url地址的get方式进行校验(实现秒传、分片续传、最新上传)
  4. 进行MD5计算(使用spark-md5)

二.重点理解

1:如何实现自动校验

uploader组件options参数中设置testChunks就会发送get请求到后端进行校验。需要后端有校验逻辑。

校验规则:

  1. 后端根据文件名(可不用)+md5去查找本地或者数据库有没有该文件上传记录,有则已经上传过,返回已上传过标识skipUploader;
  2. 如果上传过部分分片,则返回uploadedChunks数组,组件会自动跳过这些已经上传过的分片;
  3. 如果以上都没有上传会重新开始上传;

前端发送get请求后,会通过options的参数中checkChunkUploadedByResponse方法进行拦截:

  1. 如果skipUpload为true则返回true,不再进行后续操作;
  2. 如果uploadedChunks则返回后续的分片,跳过已上传的分片;
  3. 如果没有上传过不会进入此方法;

2:如何实现秒传、断点续传、最新上传

后端get请求中校验是否有上传过文件,上传过则秒传,上传过部分分片则断点续传,否则重新上传。

前端通过checkChunkUploadedByResponse获取和设置后端返回的结果

3、MD5计算

  1. 首先设置不自动上传:autoStart=false
  2. 然后通过FileReader读取文件,及对文件进行切片File.prototype.slice
  3. 根据文件大小和分片大小,切片后循环读取文件,并计算MD5
  4. 通过spark-md5计算分片的md5

三.代码实现 

<template><uploader :options="options" :fileStatusText="fileStatusText" class="uploader-example" ref="uploaderRef":auto-start="false&

相关文章:

vue3+vue-simple-uploader实现大文件上传

vue-simple-uploader本身是基于vue2实现,如果要使用vue3会报错。如何在vue3中使用,可参考我的另一篇文章:解决vue3中不能使用vue-simple-uploader__Jyann_的博客-CSDN博客 一.实现思路 使用vue-simple-uploader组件的uploader组件,设置自动上传为false,即可开启手动上传。…...

自适应变异麻雀搜索算法及其Matlab实现

麻雀搜索算法( sparrow search algorithm&#xff0c;SSA) 是2020 年新提出的一种元启发式算法[1]&#xff0c;它是受麻雀种群的觅食和反捕食行为启发&#xff0c;将搜索群体分为发现者、加入者和侦察者 3 部分&#xff0c;其相互分工寻找最优值&#xff0c;通过 19 个标准测试…...

ETL技术入门之ETLCloud初认识

首先ETL是什么&#xff1f; ETL代表“Extract, Transform, Load”&#xff0c;是一种用于数据集成和转换的过程。它在数据管理和分析中扮演着重要的角色。下面我们将分解每个步骤&#xff1a; Extract&#xff08;抽取&#xff09;&#xff1a; 这一步骤涉及从多个不同的数据源…...

uniapp项目如何运行在微信小程序模拟器上

在HbuilderX中的小程序写完后自己一定要保存&#xff0c;否则会出不来效果 那么怎么让uniapp项目运行在微信小程序开发工具中呢 1 在hbuilderx中点击运行到小程序模拟器 2 然后在项目目录中会生成一个文件夹 在微信小程序开发软件中的工具>安全设置>打开端口 或者在微…...

数据挖掘全流程解析

数据挖掘全流程解析 数据指标选择 在这一阶段&#xff0c;使用直方图和柱状图的方式对数据进行分析&#xff0c;观察什么数据属性对于因变量会产生更加明显的结果。 如何绘制直方图和条形统计图 数据清洗 观察数据是否存在数据缺失或者离群点的情况。 数据异常的两种情况…...

详细介绍如何对音乐信息进行检索和音频节拍跟踪

在本文中,我们将了解节拍的概念,以及我们在尝试跟踪节拍时面临的挑战。然后我们将介绍解决问题的方法以及业界最先进的解决方案。 介绍 音乐就在我们身边。每当我们听到任何与我们的心灵和思想相关的音乐时,我们就会迷失其中。我们下意识地随着听到的节拍而敲击。您一定已…...

Java课题笔记~ HTTP协议(请求和响应)

Servlet最主要的作用就是处理客户端请求&#xff0c;并向客户端做出响应。为此&#xff0c;针对Servlet的每次请求&#xff0c;Web服务器在调用service()方法之前&#xff0c;都会创建两个对象 分别是HttpServletRequest和HttpServletResponse。 其中HttpServletRequest用于封…...

在x86下运行的Ubuntu系统上部署QEMU用于模拟RISC-V硬件环境

1.配置工作环境 sudo apt install gcc bison flex libncurses-dev ninja-build \pkg-config build-essential zlib1g-dev pkg-config libglib2.0-dev \binutils-dev libboost-all-dev autoconf libtool libssl-dev \libpixman-1-dev python-capstone virtualenv software-prop…...

网络爬虫选择代理IP的标准

Hey&#xff0c;小伙伴们&#xff01;作为一家http代理产品供应商&#xff0c;我知道网络爬虫在选择代理IP时可能会遇到些问题&#xff0c;毕竟市面上有很多选择。别担心&#xff01;今天我要给大家分享一些实用的建议&#xff0c;帮助你们选择适合网络爬虫的代理IP。一起来看看…...

RxJava 复刻简版之三,map 多次中转数据

案例代码&#xff1a;https://gitee.com/bobidali/lite-rx-java/commit/292e9227a5491f7ec6a07f395292ef8e6ff69290 RxJava 的调用第一步是封装了观察者接受了数据的处理&#xff0c;进一步就是使用 map 将数据操作传递给上下游 1、类似Observer.create 创建一个简单的观察者…...

06 Word2Vec模型(第一个专门做词向量的模型,CBOW和Skip-gram)

博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https://github.com/nickchen121/Pre-training-language-model 配套博客链接:https://www.cnblogs.com/nickchen121/p/15105048.html 神经网络语言模型(NNL…...

Axure RP9小白安装教程

第一步&#xff1a; 打开&#xff1a;Axure中文学习网 第二步&#xff1a; 鼠标移动软件下载&#xff0c;点击Axure RP 9下载既可 第三步&#xff1a; 注意&#xff1a;Axure RP 9 MAC正式版为苹果版本&#xff0c;Axure RP 9 WIN正式版为Windows版本 中文汉化包&#xff…...

腾讯云CVM服务器2核2g1m带宽支持多少人访问?

腾讯云2核2g1m的服务器支持多少人同时访问&#xff1f;2核2g1m云服务器短板是在1M公网带宽上&#xff0c;腾讯云服务器网以网站应用为例&#xff0c;当大规模用户同时访问网站时&#xff0c;很大概率会卡在公网带宽上&#xff0c;所以压根就谈不上2核2G的CPU内存计算性能是否够…...

8.12学习笔记

在PyTorch中&#xff0c;Dataset和DataLoader是用于处理数据的两个重要类。Dataset类是一个抽象类&#xff0c;用于表示数据集。它的主要作用是将数据加载到内存中&#xff0c;并提供一种统一的方式来访问数据。为了使用Dataset类&#xff0c;你需要继承它并实现两个方法&#…...

计算机体系中的不同的缓存存储层级说明

分级说明 L1缓存的标准延迟是4个周期。这意味着&#xff0c;当CPU请求数据时&#xff0c;L1缓存需要4个时钟周期来将数据传输给CPU。 L2缓存的标准延迟是12个周期。相对于L1缓存&#xff0c;L2缓存的容量更大&#xff0c;但其读取速度更慢&#xff0c;需要更多的时钟周期来传输…...

HCIP 链路聚合技术

1、链路聚合概述 为了保证网络的稳定性&#xff0c;仅仅是设备进行备份还不够&#xff0c;我们需要针对我们的链路进行备份&#xff0c;同时也增加了链路的利用率&#xff0c;提高带宽。避免一条链路出现故障&#xff0c;导致网络无法正常通信。这就可以使用链路聚合技术。 以…...

网页爬虫中常用代理IP主要有哪几种?

各位爬虫探索者&#xff0c;你是否有想过在网页爬虫中使用代理IP来规避限制实现数据自由&#xff1f;在这篇文章中&#xff0c;作为一名IP代理产品供应商&#xff0c;我将为你揭示常见的网页爬虫代理IP类型&#xff0c;让你在爬虫的世界中游刃有余&#xff01; 一、免费公开代理…...

Js小数运算精度缺失的解决方法

项目场景&#xff1a; 提示&#xff1a;项目需求截图&#xff1a; 问题描述 众所周知Js做运算时0.10.2不等于0.3,目前项目需要计算关于金额的选项&#xff0c;涉及到金额保留后两位。保单欠款是根据用户输入的保单应收和保单欠款自动计算的。 原因分析&#xff1a; 产生浮点数…...

25 | 葡萄酒质量数据分析

基于kaggle提供的公开数据集,对全球葡萄酒分布情况和质量情况进行数据探索和分析 from kaggle: https://www.kaggle.com/zynicide/wine-reviews 分析思路: 0、数据准备 1、葡萄酒的种类 2、葡萄酒质量 3、葡萄酒价格 4、葡萄酒描述词库 5、品鉴师信息 6、总结 0、数据准备 …...

在 Windows 上安装 OpenCV – C++ / Python

在这篇博文中&#xff0c;我们将在 Windows 上安装适用于 C 和 Python 的 OpenCV。 C 安装是在自定义安装 exe 文件的帮助下完成的。而Python的安装是通过Anaconda完成的。 在 Windows 上安装 OpenCV – C / Python&#xff08;opencv官方Wndows上安装openCV- C/ Pthon 的链接…...

用STC89C52单片机+收发一体探头,从零DIY一个超声波测距仪(附完整代码和PCB)

从零打造超声波测距仪&#xff1a;STC89C52实战指南 引言 记得第一次接触超声波测距是在大学电子设计竞赛上&#xff0c;看着简单的探头能精确测量距离&#xff0c;那种神奇感至今难忘。如今超声波技术已广泛应用于倒车雷达、工业检测等领域&#xff0c;但自己动手做一个测距仪…...

从:smile:到:shipit::GitHub、Slack、Notion中那些程序员才懂的Emoji“黑话”与使用礼仪

从&#x1f60a;到&#x1f680;&#xff1a;解码开发者社群的Emoji密码与协作艺术 在GitHub的Pull Request评论区&#xff0c;一个简单的&#x1f680;符号可能让开发者会心一笑&#xff1b;Slack频道里突然出现的:shipit:表情往往预示着一次重要更新的发布。这些看似随意的图…...

Android集成腾讯TBS X5内核避坑指南:从QbSdk初始化到TbsDownloader手动下载的完整流程

Android集成腾讯TBS X5内核实战指南&#xff1a;从初始化到异常处理的完整解决方案 在移动端WebView开发中&#xff0c;系统自带内核的性能和兼容性问题一直是开发者面临的挑战。腾讯TBS X5内核作为国内广泛使用的WebView增强解决方案&#xff0c;能够显著提升H5页面的渲染效果…...

从游戏逻辑到用户权限:用C# if else玩转Razor Pages动态网站开发

从游戏逻辑到用户权限&#xff1a;用C# if else玩转Razor Pages动态网站开发 在ASP.NET Core Razor Pages开发中&#xff0c;条件逻辑就像游戏中的关卡设计——它决定了用户能看到什么、能做什么。想象一下&#xff1a;当玩家积分达到100分时解锁新地图&#xff0c;VIP用户可以…...

Postman便携版终极指南:零安装Windows API开发利器深度实战

Postman便携版终极指南&#xff1a;零安装Windows API开发利器深度实战 【免费下载链接】postman-portable &#x1f680; Postman portable for Windows 项目地址: https://gitcode.com/gh_mirrors/po/postman-portable Postman便携版是一款基于Portapps框架构建的Wind…...

Qwen3-8B性能实测:在RTX 4090上跑出40 tokens/s,性价比之选

Qwen3-8B性能实测&#xff1a;在RTX 4090上跑出40 tokens/s&#xff0c;性价比之选 1. 引言&#xff1a;消费级显卡上的大模型新选择 当大语言模型逐渐成为AI应用的核心组件&#xff0c;一个现实问题摆在开发者面前&#xff1a;如何在有限的硬件资源上获得最佳的性能体验&…...

Win11Debloat终极指南:如何快速清理Windows 11预装软件和优化系统性能

Win11Debloat终极指南&#xff1a;如何快速清理Windows 11预装软件和优化系统性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to d…...

从靶场到实战:聊聊RCE漏洞那些“花式”绕过姿势(以CTFHUB为例)

RCE漏洞对抗艺术&#xff1a;从基础绕过到高级利用实战 引子&#xff1a;当安全防线遇上创造力 在网络安全的世界里&#xff0c;远程代码执行(RCE)漏洞就像一把双刃剑——它既是攻击者梦寐以求的终极武器&#xff0c;也是防御者必须严防死守的最后防线。不同于简单的SQL注入或X…...

【AGI具身智能临界点报告】:全球仅12家实验室达成毫秒级触觉-视觉-力控协同,你缺哪一环?

第一章&#xff1a;AGI的物理世界交互能力 2026奇点智能技术大会(https://ml-summit.org) 通用人工智能&#xff08;AGI&#xff09;区别于当前狭义AI的核心维度之一&#xff0c;在于其具备持续、鲁棒、具身化的物理世界交互能力——这不仅要求感知与决策闭环&#xff0c;更需…...

给程序员的真心话:读研三年 vs 本科直接进大厂,我用亲身经历帮你算笔账

程序员职业路径抉择&#xff1a;三年读研与直接就业的量化分析框架 凌晨两点的宿舍里&#xff0c;显示器蓝光映照着代码与招聘网站交替切换的界面——这是无数计算机专业学子毕业季的常态。当"是否读研"这个问题摆在面前时&#xff0c;我们需要的不是泛泛而谈的"…...