大文件分片上传,断点续传,秒传 示例(待更新...)

1.html代码

<template>
	<div class="card content-box">
		<el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
			:limit="1" :on-change="handleFileChange" :auto-upload="false">
			<template #trigger>
				<el-button type="primary">选择文件</el-button>
			</template>
			<el-button :disabled="uploadDisabled" class="ml-3" type="success" @click="handlerUpload">上传</el-button>
			<el-button class="ml-3" type="success" @click="handlePause">暂停</el-button>
			<el-button class="ml-3" type="success" @click="handleResume">恢复</el-button>
			<el-button class="ml-3" type="success" @click="resetData">重置</el-button>
			<template #tip>
				<br /><br />
				<span>计算文件hash进度: {
  { hashPercentage }}%</span>
				<br /><br />
				<span>上传进度:{
  { fakeUploadPercentage }}%</span>
				<el-progress :text-inside="true" :stroke-width="26" :percentage="fakeUploadPercentage" />
				<div class="el-upload__tip text-red">限制一个文件, 新文件将会覆盖原文件</div>
			</template>
		</el-upload>
	</div>
</template>

2.逻辑代码

<script setup lang="ts" name="menu222">
import { ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { Upload } from "@/api/interface";
import { UploadStatusEnum } from "@/enums/uploadEnum";
import { SIZE } from "@/config/config";
import { bigUploadRequest } from "@/api/modules/upload";

const upload = ref<UploadInstance>()
// 当前的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/311423.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Springboot+vue的毕业论文管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的毕业论文管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的毕业论文管理系统&#xff0c;采用M&#xff08;model&…

并发前置知识一:线程基础

一、通用的线程生命周期&#xff1a;“五态模型” 二、java线程有哪几种状态&#xff1f; New&#xff1a;创建完线程Runable&#xff1a;start(),这里的Runnable包含操作的系统的Running&#xff08;运行状态&#xff09;和Ready&#xff08;上面的可运行状态&#xff09;Blo…

【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…

java基础之异常练习题

异常 1.Java 中所有的错误/异常都继承自 Throwable类&#xff1b;在该类的子类中&#xff0c; Error 类表示严重的底层错误&#xff0c; 对于这类错误一般处理的方式是 直接报告并终止程序 &#xff1b; Exception 类表示异常。 2.查阅API&#xff0c;完成以下填空&#xff1a;…

【C#】使用 LINQ 中的 Skip() 和 Take()进行分页,为什么要分页,分页作用是什么

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是是《C#》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握…

Linux 常用进阶指令

我是南城余&#xff01;阿里云开发者平台专家博士证书获得者&#xff01; 欢迎关注我的博客&#xff01;一同成长&#xff01; 一名从事运维开发的worker&#xff0c;记录分享学习。 专注于AI&#xff0c;运维开发&#xff0c;windows Linux 系统领域的分享&#xff01; 其他…

【内容管理系统】内容管理系统v1.0.0版本正式上线

目录 背景 体验 技术栈 功能菜单 示例图片 背景 为了开发一个无需开发人员&#xff0c;即可动态修改展示内容的内容管理系统&#xff0c;因此开发了当前的内容管理系统。 体验 体验地址&#xff1a;&#xff08;邮箱注册即可体验&#xff0c;部署的带宽有限&#xff0c…

java通过okhttp方式实现https请求的工具类(绕过证书验证)

目录 一、引入依赖包二、okhttp方式实现的https请求工具类2.1、跳过证书配置类2.2、okhttp方式的 https工具类 三、测试类 一、引入依赖包 引入相关依赖包 <!--okhttp依赖包--> <dependency><groupId>com.squareup.okhttp3</groupId><artifactId>…

C++标准学习--tuple

以下帖子介绍的比较详细&#xff1a; C的 tuple_c tuple-CSDN博客 tuple 是 C11 新标准里的类型&#xff0c;它是一个类似 pair 类型的模板。tuple 是一个固定大小的不同类型值的集合&#xff0c;是泛化的 std::pair。我们也可以把它当做一个通用的结构体来用&#xff0c;不需…

Electron中调用dll

截止目前Electron的官方稳定版本已经更新到了28.1.1。我在创建Electron项目时用的28.0.0版本&#xff0c;后面在项目中有用到调用dll方法的需求&#xff0c;大致的实现就是将后端给的dll文件引入到项目中&#xff0c;安装ffi-napi依赖&#xff0c;然后进行使用。但是在Electron…

js逆向第16例:猿人学第12题入门级js

文章目录 一、前言二、定位关键参数三、代码实现一、前言 任务:抓取这5页的数字,计算加和并提交结果 既然是入门级,那肯定很简单了 二、定位关键参数 控制台查看请求数据,m值应该就是关键参数了 进入堆栈 马上定位到了m值"m": btoa(yuanrenxue + window.pag…

【scala】编译build报错 “xxx is not an enclosing class“

private[sources] val creationTimeMs: Long {val session SparkSession.getActiveSession.orElse(SparkSession.getDefaultSession)require(session.isDefined)private[xxx]是访问权限控制在xxxx包的意思。 解决办法&#xff1a; 把[sources]删掉&#xff0c;或者改成和包名…

Element|Upload结合Progress实现上传展示进度条

背景 &#xff1a; 项目里的 附件上传 题型组件&#xff0c;用户在上传过程中&#xff0c;如果文件较大&#xff0c;上传过程较慢&#xff0c;而又没有一个类似 Loading... 的加载过程的话&#xff0c;会显得干愣愣的&#xff0c;用户体验较差&#xff0c;所以需要添加一个进度…

JDBC初体验(二)——增、删、改、查

本课目标 理解SQL注入的概念 掌握 PreparedStatement 接口的使用 熟练使用JDBC完成数据库的增、删、改、查操作 SQL注入 注入原理&#xff1a;利用现有应用程序&#xff0c;将&#xff08;恶意的&#xff09;SQL命令注入到后台数据库引擎执行能力&#xff0c;它可以通过在…

[C#]winform部署PaddleOCRV3推理模型

【官方框架地址】 https://github.com/PaddlePaddle/PaddleOCR.git 【算法介绍】 PaddleOCR是由百度公司推出的一款开源光学字符识别&#xff08;OCR&#xff09;工具&#xff0c;它基于深度学习框架PaddlePaddle开发。这款工具提供了一整套端到端的文字检测和识别解决方案&a…

灵魂三连问:是5G卡吗?支持5G吗?是5G套餐吗

关于5G的问题&#xff0c;小伙伴们的疑问是不是很多&#xff0c;它和4G到底有什么区别呢&#xff1f;什么是5G卡&#xff1f;什么是5G套餐&#xff1f;支持5G吗&#xff1f;什么是5G基站&#xff1f;我想大家现在一定是晕的&#xff0c;下面小编来给大家解惑&#xff01; 1&…

MySQL中datetime和timestamp的区别

datetime和timestamp的区别 相同点: 存储格式相同 datetime和timestamp两者的时间格式都是YYYY-MM-DD HH:MM:SS 不同点: 存储范围不同. datetime的范围是1000-01-01到9999-12-31. 而timestamp是从1970-01-01到2038-01-19, 即后者的时间范围很小. 与时区关系. datetime是存储…

Redis Zset类型

Redis Zset类型 Zset&#xff08;有序集合&#xff09;它是集合的一种&#xff0c;不仅可以保存元素&#xff0c;还可以为每个元素关联一个 double 类型的分数&#xff08;score&#xff09;&#xff0c;Redis 正是通过分数来为集合中的元素进行从小到大的排序。在 Zset 中&am…

1.11.。。。

1 有道云笔记 2 .h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> #include <QTime> #include <QTextToSpeech>namespace Ui { class Widget; }class Widget : public QWidget {Q_OBJECTpublic:explicit Widget(QW…

STL之vector

目录 vector的定义和特性 vector的定义和结构非常简单&#xff0c;它由以下几个重要的部分组成&#xff1a; vector的常用函数 vector排序去重 排序 去重 代码示例 vector的定义和特性 在c中&#xff0c;vector是一个动态数组容器&#xff0c;可以存储一系列相同类型的…