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

Vue + View-ui-plus Upload实现手动上传

本文实现Vue + Upload组件多文件手动上传支持上传图片(image)、压缩文件(zip/rar)、表格(excel)、pdf

一、dom结构

<Row><Col :span="19"></Col><Col :span="2"><div class="ivu-btn-upload btn-white" style="color: #FB773B;" @click="handleDelImg">删除</div></Col><Col :span="3"><div class="ivu-btn-upload btn-orange" @click="handleUploadImg"><img src="@/assets/images/icon-img-upload.png" width="30" />上传影像</div></Col>
</Row>
<div class="image-ul-box"><div class="image-upload"><Uploadref="upload":show-upload-list="false":default-file-list="list":on-success="handleSuccess"accept="image/*,.xls,.xlsx,.pdf,.doc,.docx,.zip,.rar":format="['jpg','jpeg','png', 'xls', 'pdf', 'word','doc', 'docx' ,'xlsx', 'rar', 'zip']":on-format-error="handleFormatError":before-upload="handleBeforeUpload"multipleaction="#"style="display: inline-block;width:68px;"><div style="width: 68px;height:58px;line-height: 58px;"><!-- <Icon type="ios-add" size="50"></Icon> --><img src="@/assets/images/img-upload.png" width="50" /><p style="color: #bdbdbd;font-size: 16px;line-height: 1;">添加文件</p></div></Upload></div><div class="image-ul-li" v-for="item,index in list" :key="'image'+index"><div class="image-ul-li-img"><Image :src="item.url" fit="cover" width="100%" height="100%" /><div class="image-li-img-check" v-if="item.statusFlag == 0"><Checkbox v-model="item.check" /></div><div class="image-li-status" v-if="item.statusFlag == 0">未上传</div></div><p class="image-ul-li-txt"><Ellipsis :text="item.name" :length="10" tooltip /></p></div>
</div>

二、js方法

handleUploadImg() {let checkList = this.list.filter(item => item.check == true)if (checkList.length == 0) {this.$Message.error("请勾选需要上传的文件!")return}this.list.forEach(item => {if (item.check) {let formData = new FormData()formData.append("file", item.files)formData.append("businessNo", this.proposalNo)uploadFile(formData).then(res => {if (res.code == "0000") {let result = res?.result?.imgUrlsif (result.length > 0) {item.statusFlag = 1item.check = false}} else {this.$Message.error(res.message)}})}})},handleSuccess(file) {},handleFormatError(file) {this.$Message.error({background: true,content: '文件格式错误,请选择正确的文件重新上传!'});},handleBeforeUpload(file) {console.log(file, "11111111")let Maxsize = file.size > 30 * 1024 * 1024;if (Maxsize) {this.$Message.warning({content: '文件体积过大,图片大小不能超过30M'});return false}let imgTypeArr = ["image/png", "image/jpg", "image/jpeg", "image/gif"]let imgType = imgTypeArr.indexOf(file.type) !== -1if (imgType) {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = (e) => {this.list.push({name: file.name,check: false,statusFlag: 0,url: reader.result,files: file})}} else {this.list.push({name: file.name,check: false,statusFlag: 0,url: this.getAssetsImgUrl(file.name.substr(file.name.lastIndexOf(".") + 1)),files: file})}return false},

相关文章:

Vue + View-ui-plus Upload实现手动上传

本文实现Vue Upload组件多文件手动上传&#xff0c;支持上传图片&#xff08;image&#xff09;、压缩文件(zip/rar)、表格(excel)、pdf 一、dom结构 <Row><Col :span"19"></Col><Col :span"2"><div class"ivu-btn-uplo…...

Radxa ROCK 3C开发板编译Opencv,支持调用树莓派摄像头模块V2

目录 1、ROCK 3C和树莓派摄像头模块V2介绍2、ROCK 3C在rsetup开启支持3、测试指令4、编译Opencv4.1 增加swap&#xff0c;确保内存够用4.2 安装依赖和下载opencv4.3 编译参考链接 5、使用opencv调用树莓派摄像头模块V2 1、ROCK 3C和树莓派摄像头模块V2介绍 ROCK 3C 是一款基于…...

Spring02

文章目录 1. IOC/DI注解开发2. IOC/DI注解开发管理第三方bean3. Spring整合4. AOP简介5. AOP入门案例6. AOP工作流程7. AOP配置管理8. AOP事务管理 1. IOC/DI注解开发 注解开发定义bean用的是2.5版提供的注解&#xff0c;纯注解开发用的是3.0版提供的注解 pom.xml添加依赖 &l…...

Linux系统中的高级内核模块调试技术

引言 在Linux系统中进行高级内核模块开发时&#xff0c;调试是不可或缺的重要环节。调试技术能够帮助开发人员发现和解决代码中的错误和问题&#xff0c;提高开发效率和代码质量。本文将深入探讨Linux系统中高级内核模块调试的技术和方法&#xff0c;包括常用的调试工具、调试…...

竞赛报名管理系统asp.net+sqlserver

竞赛报名管理系统 功能简单 内容单调 适合学习 asp.net 三层架构 sqlserver2022数据库 账号登陆注册 用户管理 克赛管理 竞赛报名 竞赛评分 公告维护 修改密码 新增竞赛 2019数据库版本低 附加不了 需要高版本数据库 说明文档 运行前附加数据库.mdf&#xff08;或sql生成数据…...

Python爬虫核心面试题2

网络爬虫 1. 什么是HTTP协议&#xff1f;它有哪些常见的请求方法&#xff1f;2. 在进行网络爬虫时&#xff0c;如何判断一个网站是否允许被爬取&#xff1f;3. 在使用HTTP请求时&#xff0c;如何处理重定向&#xff1f;4. 解释HTTP状态码200、404、500的含义。5. 什么是Session…...

【2024年华数杯全国大学生数学建模竞赛】C题:老外游中国 问题思路分析及Python代码实现

【2024 年华数杯全国大学生数学建模竞赛】C题&#xff1a;老外游中国 问题思路分析及Python代码实现 1 题目 最近&#xff0c;“city 不 city”这一网络流行语在外国网红的推动下备受关注。随着我国过境免签政策的落实&#xff0c;越来越多外国游客来到中国&#xff0c;通过网…...

HTTP/2:让网络飞起来

文章目录 一、HTTP/2 的基本概念和背景二、HTTP/2 的主要特性和优势2.1 二进制帧2.2 多路复用2.3 头部压缩2.4 服务器推送 三、HTTP/2 的实现和部署四、HTTP/2 与现有技术的比较五、HTTP/2 与 Web 性能优化六、结束语&#xff1a;让 HTTP/2 助力你的 Web 开发 今天我们来聊聊一…...

C++ primer plus 第17 章 输入、输出和文件:刷新输出缓冲区

C primer plus 第17 章 输入、输出和文件&#xff1a;刷新输出缓冲区 C primer plus 第17 章 输入、输出和文件&#xff1a;刷新输出缓冲区 文章目录 C primer plus 第17 章 输入、输出和文件&#xff1a;刷新输出缓冲区17.2.3刷新输出缓冲区 17.2.3刷新输出缓冲区 如果程序使…...

项目总结2

文件的分片上传 格外功能是&#xff1a;秒传&#xff0c;断点续传。 今天最惨&#xff0c;上午找bug&#xff0c;下午一直在修改&#xff0c;晚上脑子what了&#xff0c;混乱的很&#xff0c;数据表之间的逻辑不清晰&#xff0c;导致我传值&#xff0c;还有操作数据库一直有问…...

PXE实现自动批量安装部署操作系统

PXE简介 PXE&#xff08;Preboot eXecution Environment&#xff09;是一种在计算机启动时使用网络接口从远程服务器获取操作系统安装和启动信息的技术。通过PXE&#xff0c;计算机可以从局域网中的PXE服务器上下载操作系统安装文件&#xff0c;并进行自动化的操作系统部署或故…...

Cyber Weekly #18

赛博新闻 1、Google 狂卷小模型&#xff0c;2B 参数 Gemma 2 赶超 GPT-3.5 Google本周发布了开源的轻量级、高性能模型 Gemma 2 2B。它拥有 20 亿参数&#xff0c;是从更大规模的模型中提炼而来的&#xff0c;在 LMSYS 大模型竞技场的得分超越了 GPT-3.5 和 Mixtral 8x7B。该…...

Open Interpreter - 开放解释器

文章目录 一、关于演示它是如何工作的&#xff1f;与 ChatGPT 的代码解释器比较 二、快速开始三、更多操作1、互动聊天2、程序化聊天3、开始新的聊天4、保存和恢复聊天5、自定义系统消息6、更改模型7、在本地运行 Open Interpreter终端Python上下文窗口&#xff0c;最大令牌 8、…...

“八股文”:程序员的福音还是梦魇?

——一场关于面试题的“代码战争” 在程序员的世界里&#xff0c;“八股文”这个词儿可谓是“如雷贯耳”。不&#xff0c;咱们可不是说古代科举考试中的那种八股文&#xff0c;而是指程序员面试中的那些固定套路的题目。如今&#xff0c;各大中小企业在招聘程序员时&#xff0…...

数据结构第2天作业 8月3日

单向链表 typedef int datatype; //由于有效数据不一定是正数&#xff0c;所以将数据重命名。typedef struct lklst{ //不能是无名结构体了&#xff0c;因为定义指针域的时候需要使用union{int len; //头结点时候使用&#xff1b;datatype data; …...

设计界的新宠:5款热门UI在线设计软件评测

随着用户界面设计行业的蓬勃发展&#xff0c;越来越多的设计师进入用户界面设计。选择一个方便的用户界面设计工具尤为重要&#xff01;除了传统的用户界面设计工具&#xff0c;在线用户界面设计工具也受到越来越多设计师的青睐。这种不受时间、地点、计算机配置限制的工作方法…...

github添加ssh密钥,通过ssh方式推送代码

左手编程&#xff0c;右手年华。大家好&#xff0c;我是一点&#xff0c;关注我&#xff0c;带你走入编程的世界。 公众号&#xff1a;一点sir&#xff0c;关注领取python编程资料 很多人在使用github的时候&#xff0c;如果还是使用https的方式推送代码的话&#xff0c;可能会…...

Python设计模式 - 抽象工厂模式

定义 抽象工厂模式是一种创建型设计模式&#xff0c;它提供了一种创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类。 产品等级结构与产品族 为了更好地理解抽象工厂模式&#xff0c;先引入两个概念&#xff1a; 产品等级结构&#xff1a;就是产品的…...

【JavaEE初阶】懒汉模式与饿汉模式及指令重排序问题

目录 &#x1f4d5; 单例模式 &#x1f333; 饿汉模式 &#x1f6a9; 线程安全 &#x1f38d; 懒汉模式 &#x1f6a9; 懒汉模式-单线程版 &#x1f6a9; 懒汉模式-多线程版 &#x1f384; 指令重排序 &#x1f4d5; 单例模式 单例模式是一种经典的设计模式&#xff0c;…...

Vue3使用Cascader 级联选择器如何获取值并提交信息

我写了一个用户对象&#xff0c;有address地址字段&#xff0c;我怎么将用户选择的级联数据selectedValue值传给address&#xff0c;并将对象返回给后端&#xff0c;核心代码实现了该问题。 <script> 核心代码&#xff1a; //获取住址并更新给addresslet selectedValue…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...

SQL注入篇-sqlmap的配置和使用

在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap&#xff0c;但是由于很多朋友看不了解命令行格式&#xff0c;所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习&#xff0c;链接&#xff1a;https://wwhc.lanzoue.com/ifJY32ybh6vc…...

C++ 类基础:封装、继承、多态与多线程模板实现

前言 C 是一门强大的面向对象编程语言&#xff0c;而类&#xff08;Class&#xff09;作为其核心特性之一&#xff0c;是理解和使用 C 的关键。本文将深入探讨 C 类的基本特性&#xff0c;包括封装、继承和多态&#xff0c;同时讨论类中的权限控制&#xff0c;并展示如何使用类…...

基于 HTTP 的单向流式通信协议SSE详解

SSE&#xff08;Server-Sent Events&#xff09;详解 &#x1f9e0; 什么是 SSE&#xff1f; SSE&#xff08;Server-Sent Events&#xff09; 是 HTML5 标准中定义的一种通信机制&#xff0c;它允许服务器主动将事件推送给客户端&#xff08;浏览器&#xff09;。与传统的 H…...