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

封装el-upload组件,用于上传图片和视频的组件

使用环境 vue3+element plus
需要根据后端返回结构修改的函数:onPreview onRemove onSuccess

组件使用

基本使用

在这里插入图片描述
源代码:

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){console.log(urls)
}
</script><template><AutoUploadFile @change="change"/>
</template><style lang="scss" scoped>
</style>

初始文件列表回显

在这里插入图片描述
源代码:

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
import {ref} from "vue";const initUrls = ref(['http://127.0.0.1:9090/file/local-plus/6700f235df13a72064bf9167.png'
])function change(urls) {console.log(urls)
}
</script><template><AutoUploadFile :init-file-urls="initUrls" accept=".jpg,.jpeg,.png" @change="change"></AutoUploadFile>
</template><style lang="scss" scoped>
</style>

定义上传格式

如果有mp4类型,文件展示列表就会变为text

在这里插入图片描述
源代码:

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){console.log(urls)
}
</script><template><AutoUploadFile accept=".jpg,.jpeg,.png,.mp4" :max-size="100" @change="change"/>
</template><style lang="scss" scoped>
</style>

自定义上传按钮样式

在这里插入图片描述
源代码:

<script setup>
import AutoUploadFile from '@/components/auto-upload-file/index.vue'
function change(urls){console.log(urls)
}
</script><template><AutoUploadFile accept=".jpg,.jpeg,.png,.mp4" :max-size="100" @change="change"><el-button>自定义上传样式</el-button></AutoUploadFile>
</template><style lang="scss" scoped>
</style>

组件属性

属性名属性类型默认值是否必填说明
initFileUrlsArray[]用于上传列表的回显,接收外部初始化url数组
listTypeStringpicture-card上传列表展示格式。可选项:picture-card/picture/text , 但是如果accept允许mp4,那么listType就会自动转化为text
actionString#上传文件时的接口服务
headersObject{}请求头
nameStringfile提交文件时的字段名
withCredentialsBooleantrue是否支持cookie凭证信息
showFileListBooleantrue是否展示上传列表
acceptString“.jpg,.jpeg,.png”可以上传的文件类型
limitNumber5允许上传的最大文件数量
maxSizeNumber5最大文件大小,单位MB
tipPrefixString“”提示信息前缀
showTipBooleantrue是否展示提示信息
showOverflowTooltipBooleantruetip过长是否使用省略号显示
multipleBooleantrue可以多选文件
autoUploadBooleantrue默认自动上传
sizeString100pxpicture-card的尺寸大小

组件事件

事件名事件参数列表说明
onProgress(e,file,fileList)用于监控文件上传进度
change(urls)上传列表改变时的回调

组件暴露方法

方法名参数列表说明
clearFiles()清空文件列表
submit()用于手动提交

组件插槽

插槽名插槽回显参数说明
default上传文件时的点击区域,用于自定义样式
file{ file }文件列表样式,用于自定义缩略图
trigger用于手动提交,只选择文件,不发起提交请求的插槽

组件源码:(auto-upload-file.vue)

<!--需要根据后端返回结构修改的函数:onPreview onRemove onSuccess -->
<script setup>
import {computed, onMounted, onUpdated, ref} from "vue";
import {ElMessage} from "element-plus";const prop = defineProps({// 文件列表initFileUrls: {type: Array,default: []},// 展示格式listType: {type: String,default: 'picture-card'},// 上传文件的默认接口action: {type: String,default: 'http://localhost:9090/upload/file'},// 请求头(添加token等)headers: {type: Object,default: {}},// 上传时的文件名(需要与后端接收时的字段保持一致)name: {type: String,default: 'file'},// 默认支持cookie凭证信息withCredentials: {type: Boolean,default: true},// 默认展示上传文件列表showFileList: {type: Boolean,default: true},// 可接受文件的类型accept: {type: String,default: '.jpg,.jpeg,.png'},// 允许上传的最大文件数量limit: {type: Number,default: 5},// 单位MBmaxSize: {type: Number,default: 5},// 提示前缀tipPrefix: {type: String,default: ''},// 是否展示提示showTip: {type: Boolean,default: true},// tip过长使用省略号显示showOverflowTooltip: {type: Boolean,default: true},// 可以多选文件multiple: {type: Boolean,default: true},// 默认自动上传autoUpload: {type: Boolean,default: true},// picture-card尺寸大小size: {type: String,default: '6.25rem'}
})const emit = defineEmits(['onProgress', 'change'])
defineExpose({clearFiles,submit
})// el-upload使用的文件列表
const fileList = ref(prop.initFileUrls.map(item => {return {name: getFileName(item),url: item}
}))const uploadRef = ref()// 存放后端返回的url,及初始化url
const urls = ref([...prop.initFileUrls])// 如果允许上传视频,则默认只能使用text显示上传列表
const listTypeCmp = computed(() => {return prop.accept.indexOf('mp4') !== -1 ? 'text' : prop.listType
})// 提示信息
const tip = computed(() => {return `${prop.tipPrefix ? prop.tipPrefix + ',' : ''}文件类型:${prop.accept.replaceAll(',', '/').replaceAll('.', '')},文件大小不能超过:${prop.maxSize}MB`
})// 文件上传之前的钩子
function beforeUpload(e) {const MB = e.size / (1024 * 1024)if (MB > prop.maxSize) {ElMessage.error(`文件的大小不能超过:${prop.maxSize}MB`)return false}
}// 上传成功的回调(根据后端返回值不同需要略作修改)
function onSuccess(e, file) {urls.value.push(e)emit('change', urls.value)
}const dialogFileUrl = ref()
const dialogVisible = ref(false)// 预览图片(根据后端返回值不同需要略作修改)
function onPreview(e) {dialogFileUrl.value = e.response || e.urldialogVisible.value = true
}// 移除文件(根据后端返回值不同需要略作修改)
function onRemove(e) {urls.value = urls.value.filter(item => item !== (e.response || e.url))emit('change', urls.value)
}// 超出最大文件限制时,执行的钩子函数
function onExceed(e) {ElMessage.error(`超出要求的文件最大数量:${prop.limit}`)
}// 文件上传失败时的回调
function onError() {ElMessage.error('文件上传失败')
}// 上传进度回调
function onProgress(e, file, fileList) {emit('onProgress', e, file, fileList)
}// 清空文件列表
function clearFiles() {uploadRef.value.clearFiles()urls.value = []emit('change', urls.value)
}// 手动提交
function submit() {uploadRef.value.submit()
}// 获取后缀
function getSuffix(url) {return url.substring(url.lastIndexOf('.') + 1)
}// 获取文件名
function getFileName(url) {return url.substring(url.lastIndexOf('/') + 1)
}// 阻止点击tip时触发的上传行为
function preventClick(event) {event.stopPropagation()
}// 初始化picture-card大小
function initSize() {const uploadListItem = document.querySelector('.el-upload-list--picture-card')const uploadPictureCard = document.querySelector('.el-upload--picture-card')if (uploadListItem) {uploadListItem.style.setProperty('--el-upload-list-picture-card-size', prop.size)}if (uploadPictureCard) {uploadPictureCard.style.setProperty('--el-upload-picture-card-size', prop.size)if (listTypeCmp.value==='picture-card'){uploadPictureCard.style['margin-bottom']='1.56rem'}}
}// 动态处理展示样式
function handleStyle() {initSize()
}onUpdated(() => {handleStyle()
})
onMounted(() => {handleStyle()
})</script><template><el-uploadref="uploadRef"class="upload-box"v-model:file-list="fileList":list-type="listTypeCmp":action="action":headers="headers":with-credentials="withCredentials":name="name":show-file-list="showFileList":before-upload="beforeUpload":on-success="onSuccess":on-remove="onRemove":on-preview="onPreview":accept="accept":limit="limit":on-exceed="onExceed":on-error="onError":on-progress="onProgress":auto-upload="autoUpload":multiple="multiple"><template #default v-if="autoUpload"><div class="upload"><div class="upload-default"><slot><el-icon v-if="listTypeCmp==='picture-card'"style="width: 100%;height: 100%;font-size: 1.88rem;color: #888888"><Plus/></el-icon><el-button v-else>上传文件</el-button></slot></div><div v-if="listTypeCmp==='picture-card' && showTip" class="upload-tip abs-tip" @click="preventClick"><div class="tip-div" :title="tip":class="{'text-overflow-ellipsis':showOverflowTooltip}"><span>{{ tip }}</span></div></div></div></template><template #tip v-if="listTypeCmp!=='picture-card' && showTip"><div class="upload-tip" @click="preventClick"><div class="tip-div" :title="tip":class="{'text-overflow-ellipsis':showOverflowTooltip}"><span>{{ tip }}</span></div></div></template><!--    自定义缩略图--><template #file="{file}"><slot name="file" :file="file"></slot></template><template #trigger v-if="!autoUpload"><slot name="trigger"></slot></template></el-upload><!--文件预览--><el-dialog v-model="dialogVisible" width="80%"><video style="height: 100%;width: 100%" v-if="getSuffix(dialogFileUrl)==='mp4'" :src="dialogFileUrl" controls/><el-image v-else style="height: 80vh" w-full :src="dialogFileUrl" alt="Preview Image"/></el-dialog>
</template><style lang="scss" scoped>.upload-box {box-sizing: border-box;.upload {position: relative;height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;.abs-tip{position: absolute;bottom: -1.88rem;left: 0;}}.upload-tip {width: 100%;.tip-div {width: 100%;cursor: pointer;color: red;font-weight: 200;font-size: 0.75rem;}.text-overflow-ellipsis {display: inline-block;overflow: hidden;white-space: nowrap; /* 不换行 */text-overflow: ellipsis; /* 超出部分显示为省略号 */}}
}
</style>

相关文章:

封装el-upload组件,用于上传图片和视频的组件

使用环境 vue3element plus 需要根据后端返回结构修改的函数&#xff1a;onPreview onRemove onSuccess 组件使用 基本使用 源代码&#xff1a; <script setup> import AutoUploadFile from /components/auto-upload-file/index.vue function change(urls){console.log…...

6.将扩散模型与其他生成模型的关联(2)

1.归一化流与扩散模型 自一化流(Normalizing Flow)是生成模型&#xff0c;通过将易于处理的分布进行变换以队对高维数据进行建模。归一化流可以将简单的概率分布转化为极其复杂的分布&#xff0c;并用于强化学习、变分推理等领域。 现有的归一化流是基于变量替换公式构…...

【C++】基于红黑树封装set和map

&#x1f680;个人主页&#xff1a;小羊 &#x1f680;所属专栏&#xff1a;C 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言一、更高维度的泛型二、模版参数三、比较逻辑的重写四、迭代器4.1 const迭代器4.2 重载4.3 - -重载 五、完整代…...

24最新新手入门指南:Stable Diffusion!

前言 Stable Diffusion&#xff0c;一款新兴的开源AI绘画软件&#xff0c;正逐渐成为数字艺术家和爱好者的新宠。它的强大功能让用户能够轻松创造出令人印象深刻的数字艺术作品。 无论你是专业艺术家还是艺术新手&#xff0c;Stable Diffusion都为你提供了一个探索创造力的新…...

Java-基础

1. 导入模块不能纯粹的复制粘贴&#xff0c;要从new里导入&#xff0c;因为前者建立不了关联 2. 数组 String[] name{"张三","李四","王五"};int[] numsnew int[]{1,2,3};//二维String[][] names{{"张三","李四"},{"…...

二、后台管理系统布局菜单可拖动

前两天产品提出了一个需求,说后台管理系统的左边菜单的名称字数过多,遮挡了。希望能让客户能够看到全部的名称,给左侧菜单增加一个可拖动的功能,经过我的研究,这个功能最终也做出来了,先看效果,双击查看。 下面咱们进入实现步骤 第一步,找到文件。一般的项目中都存在l…...

socket和http区别

socket和http区别&#xff1a;1、主体不同&#xff1b;2、所处层次不同&#xff1b;3、连接状态不同&#xff1b;4、传输数据量不同&#xff1b;5、数据安全性不同&#xff1b;6、连接方式不同。其中&#xff0c;主体不同指的是socke是一个调用接口&#xff08;API&#xff09;…...

算法:974.和可以被K整除的子数组

题目 链接:leetcode链接 思路分析&#xff08;前缀和 同余定理&#xff09; 首先&#xff0c;我们要了解一下什么是同余定理 同余定理&#xff1a; 如果&#xff08;a - b&#xff09;/ p k …… 0 则 a % p b % p 证明我写在草稿纸上&#xff0c;如下图&#xff1a; 初…...

QD1-P8 HTML 格式化标签(font、pre、b、strong、i、u、del、s、sub、sup)

本节学习&#xff1a;HTML 格式化标签。 本节视频 www.bilibili.com/video/BV1n64y1U7oj?p8 ‍ 一、font 标签 用途&#xff1a;定义文本的字体大小、颜色和 face&#xff08;字体类型&#xff09;。 示例 <!DOCTYPE html> <html><head><meta cha…...

红米Turbo 3工程固件预览 修复底层 体验原生态系统 默认开启diag端口

红米Turbo 3机型代码:peridot 国外版本:POCO F6 用于以下型号的小米机型:24069RA21C, 24069PC21G, 24069PC21I。搭载1.5K OLED屏、骁龙8s处理器、5000mAh电池+90W快充、5000万像素主摄。 通过博文了解 1💝💝💝-----此机型工程固件的资源刷写注意事项 2💝💝�…...

sql的调优指南及高级sql技巧

SQL调优是优化数据库性能的重要手段&#xff0c;涉及编写高效的SQL查询、合理设计索引、优化数据库结构等。以下是一些SQL调优指南和高级技巧&#xff1a; SQL调优指南 选择合适的查询方式&#xff1a; **避免使用SELECT ***&#xff1a;仅选择所需的列&#xff0c;减少数据传…...

生成式专题的第一节课---GAN图像生成

一、GAN的起源与发展 1.GAN的起源 GAN &#xff08;生成式对抗网络&#xff09;诞生于 2014 年&#xff0c;由 Ian Goodfellow 提出&#xff0c;是用于生成数据的深度学习模型&#xff0c;创新点是对抗性训练&#xff0c;即生成器与判别器的竞争关系&#xff0c;为图像生成、…...

中科星图GVE(案例)——AI实现建筑用地变化前后对比情况

目录 简介 函数 gve.Services.AI.ConstructionLandChangeExtraction(image1,image2) 代码 结果 知识星球 机器学习 简介 AI可以通过分析卫星图像、航拍影像或其他地理信息数据&#xff0c;实现建筑用地变化前后对比。以下是一种可能的实现方法&#xff1a; 数据获取&am…...

Spring Boot中获取application.yml中属性的几种方式

在Spring Boot应用程序中&#xff0c;可以通过多种方式从application.yml文件中获取配置属性。以下是几种常见的方法&#xff1a; 1. 使用Value注解 你可以使用Value注解将application.yml中的属性注入到Spring管理的bean中。 application.yml app:name: MySpringBootAppve…...

YOLO11改进 | 注意力机制 | 结合静态和动态上下文信息的注意力机制

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 上下文Transformer&#xff08;CoT&…...

Python中函数的使用方法

1 问题 在python的学习中&#xff0c;一个相同的程序可能会有多种不同的代码输入方式&#xff0c;那么函数这种方式是否方便快捷呢&#xff1f;今天我们来简单介绍函数的部分使用方法。 2 方法 定义函数&#xff1a;代码清单1Def function name (arguments):return result在上面…...

遨游智能终端赋能“危急特”场景,力推北斗技术规模化应用!

随着《北斗规模应用三年行动计划&#xff08;2023-2025&#xff09;》的发布&#xff0c;北京、湖北、重庆等多地出台北斗支持政策&#xff0c;北斗系统正稳步迈向“安全可控&#xff0c;泛在融合&#xff0c;开放兼容&#xff0c;服务全球”的发展目标。遨游通讯紧跟国家战略步…...

构建流媒体管道:利用 Docker 部署 Nginx-RTMP 从 FFmpeg RTMP 推流到 HLS 播放的完整流程

最近要实现一个类似导播台的功能&#xff0c;于是我先用 FFmpeg 实现一个参考对照的 Demo&#xff0c;我将其整理为一篇文章&#xff0c;方便后续大家或者和自己参考&#xff01; 1、软件工具介绍 本次部署相关软件 / 工具如下&#xff1a; FFmpeg&#xff1a;全称是 Fast Fo…...

【汇编语言】寄存器(CPU工作原理)(六)—— 修改CS,IP的指令以及代码段

文章目录 前言1. 修改CS、IP的指令2. 问题分析:CPU运行的流程3. 代码段小结结语 前言 &#x1f4cc; 汇编语言是很多相关课程&#xff08;如数据结构、操作系统、微机原理&#xff09;的重要基础。但仅仅从课程的角度出发就太片面了&#xff0c;其实学习汇编语言可以深入理解计…...

机器学习与神经网络:从技术前沿到诺贝尔奖的跨越与未来展望

近日&#xff0c;2024年诺贝尔物理学奖颁发给了机器学习与神经网络领域的研究者&#xff0c;这是历史上首次出现这样的情况。这项奖项原本只授予对自然现象和物质的物理学研究作出重大贡献的科学家&#xff0c;如今却将全球范围内对机器学习和神经网络的研究和开发作为了一种能…...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Opencv中的addweighted函数

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

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...