vue-simple-uploader在VUE3中分片上传大文件

news2024/9/22 5:38:09

vue-simple-uploader是一个优秀的大文件分片上传组件,在vue2里面工作一切正常,但是在vue3里面却发现了一些问题:

(1)在element-plus的el-dialog里面渲染失败;

(2)上传进度条不能正常工作,重传、删除、开始、暂停等按钮不能正常工作;

vue-simple-uploader的作者做了vue3的适配方案,但是直接使用这个方案还是有一些问题,比如没有删除按钮。

附:vue-simple-uploader的vue3适配方式

https://github.com/simple-uploader/vue-uploader/tree/vue3

我采用的解决办法是,直接拉了源码,然后手动修改。

(1)github上拉取vue-simple-uploader的源码(附件中给出);

(2)package.json里面的依赖包还是安装旧版本的

"vue-simple-uploader": "^0.7.6"

(3)在模块中引用并使用

import uploader from "@/components/ChunkUpload/uploader.vue";

内嵌到一个form中

        <el-form-item label-width="0px" v-if="open">
          <uploader :options="options" :file-status-text="statusText" class="upload-tiff" ref="tiffUploader"
            @file-complete="fileComplete" @file-added="fileAdded" @complete="complete" v-on:file-removed="fileRemoved">
          </uploader>
          <div class="file-upload-tip">* ZIP内每个文件以日期命名,如20230508.tiff</div>
        </el-form-item>

(4)效果

前端源码链接:

https://download.csdn.net/download/langyan122/87715094

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

由浅入深详解四种分布式锁

在多线程环境下&#xff0c;为了保证数据的线程安全&#xff0c;锁保证同一时刻&#xff0c;只有一个可以访问和更新共享数据。在单机系统我们可以使用synchronized锁或者Lock锁保证线程安全。synchronized锁是Java提供的一种内置锁&#xff0c;在单个JVM进程中提供线程之间的锁…

信息系统项目管理师,第四版应该如何应对

一、 改版情况。 2023年3月&#xff0c;新版教材起售。 2023年4月4日&#xff0c;官网宣布本次考试第三版第四版兼顾使用。 以历年的考试时间来看&#xff0c;一般这次考试是在 5月27日、28日附近。 接下来只有一个月左右的时间了。给大家聊聊面对现在这个情况如何备考。 …

考研计算机组成原理总结(7)

一.虚拟存储器 1.基本知识 主存和辅存共同构成了虚拟存储器&#xff0c;二者在硬件和系统软件的共同管理下工作。对于应用程序员而言&#xff0c;虚拟存储器是透明的。虚拟存储器具有主存的速度和辅存的容量。 2.基本概念 虚拟存储器将主存或辅存的地址空间统一编址&#x…

如何提高图片清晰度?三种方法来帮你!

如何提高图片清晰度&#xff1f;图片在上传到网络后会被压缩&#xff0c;导致图片变得模糊。今天&#xff0c;我将分享三种方法&#xff0c;帮助您提高图片的清晰度。 方法一&#xff1a;使用记灵在线工具 工具地址&#xff1a;记灵在线工具 - 更专注于发现工具的实用性 该工…

[Linux 命令] ls 显示目录内容列表

ls 显示目录内容列表 思维导图 补充说明 ls命令 就是list的缩写&#xff0c;用来显示目标列表&#xff0c;在Linux中是使用率较高的命令。ls命令的输出信息可以进行彩色加亮显示&#xff0c;以分区不同类型的文件。 语法 ls [选项] [文件名...][-1abcdfgiklmnopqrstuxABCD…

Node.js下载安装与简单使用

一、下载Node.js 打开链接&#xff1a;Node.js 的官网首页&#xff08;https://nodejs.org/en/&#xff09; 选择左边的 LTS 版本和 Current 版本的不同 1.LTS 为长期稳定版&#xff0c;对于追求稳定性的企业级项目来说&#xff0c;推荐安装 LTS 版本的 Node.js。 2.Current …

【系统集成项目管理工程师】项目质量管理

&#x1f4a5;十大知识领域&#xff1a;项目质量管理 项目质量管理包括以下 3 个过程: 规划质量管理实施质量保证质量控制 一、规划质量管理 规划质量管理是识别项目及其可交付成果的质量要求和标准&#xff0c;并准备对策确保符合质量要求的过程 这部分重点主要是工具与技术 1…

C语言从入门到精通第8天(分支结构if、else、switch的使用)

分支结构if、else、switch的使用 if语句if...else语句if...else嵌套if...else if...else语句switch语句 if语句 语法&#xff1a; if(表达式){ 语句&#xff1b; } 如果表达式为真&#xff0c;则执行{}里面的语句。如果为假&#xff0c;则不执行。示例代码&#xff1a; int m…

春秋云镜:CVE-2022-25488(SQL报错注入)

目录 一、题目 二、sqlmap梭哈查flag 一、题目 介绍&#xff1a; Atom CMS v2.0存在sql注入漏洞在/admin/ajax/avatar.php页面 进入题目; 发现是Not Found页面 一开始以为打开的问题&#xff1a; 一想 我们要访问的是/admin/ajax/avatar.php 访问后是空白页面&#xff1a…

进程树pstree介绍

进程树&#xff08;pstree&#xff09;是一个Linux/Unix命令&#xff0c;用于显示系统中所有进程的层次结构。它可以将进程展示为树形结构&#xff0c;其中每个进程都是一个节点&#xff0c;而每个节点下面的子节点是该进程的子进程。pstree可以按照进程的父子关系显示进程&…

[架构之路-172]-《软考-系统分析师》-5-数据库系统-5- 数据库设计与建模(逻辑设计-实体关系图ER图-关系图、物理设计)

目录 5 . 5 数据库设计与建模 5.5.1数据库设计阶段 1 . 规划&#xff1a;为什么做&#xff1f;能不能做&#xff1f; 2 . 需求分析&#xff1a;做成什么样子&#xff1f; 3 . 概念设计&#xff1a;怎么做 - 概念 &#xff08;用户&#xff09; 4 . 逻辑设计&#xff1a;怎…

p66 内网安全-域横向批量atschtasksimpacket

数据来源 本文仅用于信息安全的学习&#xff0c;请遵守相关法律法规&#xff0c;严禁用于非法途径。若观众因此作出任何危害网络安全的行为&#xff0c;后果自负&#xff0c;与本人无关。 基本概念 DMZ区域&#xff1a;称为“隔离区”&#xff0c;也称‘’非军事化区/停火区…

C语言入门篇——数据篇

目录 1、变量与常量 1.1变量 1.2常量 1.2.1#define 定义的标识符常量 1.2.2枚举常量 2、数据类型关键字 3、整数 4、浮点数 5、基本数据类型 5.1、int型数据 5.2、char型数据 5.3、_Bool类型 5.4、float、double和long double 5.5、复数和虚数类型 6、总结 1、变…

Preempt-RT实时系统下IGH主站安装

文章目录 1. 安装环境2. 确定网卡类型3. 下载IGH安装包4. 配置安装5. 启动测试6. 扫描从站7. 设置环境变量 1. 安装环境 ubuntu18.04内核版本&#xff1a;4.19.72-rt25 2. 确定网卡类型 查看网卡驱动 lspci -v可以看到我的网卡驱动主要有e1000e和igb两种类型&#xff0c;其…

localhost与本机IP IPtables匹配顺序

localhost&host IPtables iptables链匹配顺序 ping localhost 当前实验网络为IPV4模式通过tcpdump抓包&#xff0c;我们可以发现ping localhost的流量最终发送到lo网卡了通过iptables pkts数据计数我们可知&#xff0c;ping localhost的iptables过滤流程为&#xff1a;应…

npm install 卡住 不动弹

npm install时如果卡住&#xff0c;不动弹&#xff0c;可以试试以下几种方式。 设置注册中心&#xff0c;使用淘宝注册中心。 这种主要解决因为网络问题引起的下载失败&#xff0c;npm config set registry https://registry.npmmirror.com&#xff0c;设置完后使用npm config…

阻止or关闭Win10自动更新

阻止or关闭Win10自动更新 https://baijiahao.baidu.com/s?id1732432888882246429&wfrspider&forpc 一、禁用Windows Update服务 1、同时按下键盘 Win R&#xff0c;打开运行对话框&#xff0c;然后输入命令 services.msc &#xff0c;点击下方的“确定”打开服务。…

轻松掌握k8s的kubectl使用命令行操作Service知识点02

1、Service将同类型一组应用统一IP访问 将一组 Pods 网络服务的抽象方法。统一Ip后&#xff0c;默认就实现了负载均衡。 1、只在Pod内部任意机器访问的ClusterIp类型 在命令行操作生成一个ClusterIp地址。这种ClusterIp只能在Pod内部访问。 生成了ClusterIp之后&#xff0…

Git的安装和学习使用(一)

本篇文章旨在分享本人在学习Git时的随笔记&#x1f929; 文章目录 一、Git 快速入门1.1 Git 概述1.2 SCM概述1.3 Git 安装1.3.1 软件下载1.3.2 软件安装1.3.3 软件测试 二、Git 基础使用2.1 Git 概念2.1.1 版本控制2.1.2 分布式2.1.3 系统2.1.4 区域 2.2 Git 基础指令2.2.1 Lin…

UTC时间、GMT时间、CST时间(北京时间)、时间戳

一、几个时间相关的概念。 GMT时间&#xff1a;Greenwich Mean Time&#xff0c;格林尼治平时&#xff0c;又称格林尼治平均时间或格林尼治标准时间。是指位于英国伦敦郊区的皇家格林尼治天文台的标准时间。 GMT存在较大误差&#xff0c;因此现在已不再被作为标准时间使用。现…