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

【sgUploadImage】自定义组件:基于elementUI的el-upload封装的上传图片、相片组件,适用于上传缩略图、文章封面

sgUploadImage源码

<template><div :class="$options.name"><ul class="uploadImages"><liclass="uploadImage"v-loading="loadings[i]"v-for="(a, i) in uploadImages":key="i"@click="clickFile(a)"><img :src="a" @load="load(a, i)" v-if="typeof a !== 'number'" /><el-buttonv-if="showRemoveBtn(a)"class="remove-btn"type="text"icon="el-icon-delete"@click.stop="remove(a, i)"/></li></ul><el-alertv-if="alertMsg !== false"style="margin-top: 10px":closable="true":close-text="``":description="``":effect="'light'":show-icon="true":title="alertMsg || `最多可上传${limit}个图片,每个附件大小不超过${maxSize}M`":type="'warning'"/><el-uploadstyle="display: none"ref="upload":accept="accept":action="'#'":auto-upload="false":multiple="true":on-change="change":show-file-list="false"/><el-image ref="image" style="display: none" src="" :preview-src-list="[previewSrc]" /></div>
</template>
<script>
export default {name: "sgUploadImage",components: {},data() {return {accept: `.${this.$global.resourceTypes.find((v) => v.label == `图片`).suffixs.join(",.")}`,form: {},uploadBtn: null, //上传触发按钮disabled: false,alertMsg: ``, //如果为false就隐藏提示内容limit: 1, //默认只能传1张maxSize: 10, //默认最大传10MB的图片imgFiles: [], //图像的base64对象数组files: [], //图像的File对象数组previewSrc: null,loadings: [],};},props: ["data"],computed: {uploadImages() {return this.imgFiles && this.imgFiles.length ? this.imgFiles : 1;},},watch: {data: {handler(newValue, oldValue) {//console.log(`深度监听${this.$options.name}:`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = JSON.parse(JSON.stringify(newValue));} else {this.form = {};}this.disabled = this.form.disabled;this.alertMsg = this.form.alertMsg;// 获取外部回显上传列表----------------------------------------let files =typeof this.form.files === `string`? JSON.parse(this.form.files || "[]"): this.form.files || [];Array.isArray(files) || (files = [files]);this.files = files;this.imgFiles = [];this.files.forEach((v, i) => this.getImageSrc(v, i));// ----------------------------------------this.form.accept && (this.accept = this.form.accept);this.form.limit && (this.limit = this.form.limit);this.form.maxSize && (this.maxSize = this.form.maxSize);this.$nextTick(() => {let width = this.form.width || 200;let height = this.form.height || 150;this.$el.style.setProperty("--uploadImage_width", `${width}px`);this.$el.style.setProperty("--uploadImage_height", `${height}px`);this.$el.style.setProperty("--background",`url(http://via.placeholder.com/${width}x${height})`);this.uploadBtn = this.$refs.upload.$children[0].$refs.input;this.uploadBtn.webkitdirectory = this.form.webkitdirectory; //让el-upload支持上传文件夹});},deep: true, //深度监听immediate: true, //立即执行},},created() {},mounted() {},destroyed() {},methods: {load(d, idx) {this.$set(this.loadings, idx, false);},getImageSrc(file, idx = this.files.length - 1) {this.$set(this.loadings, idx, true);if (file.path) {this.imgFiles.push(this.$d.responseFile(file));} else {this.$g.file2Base64Image(file, (d) => this.imgFiles.push(d));}},showRemoveBtn(d) {return !(typeof d === "number");},remove(d, i) {this.files.splice(i, 1);this.imgFiles.splice(i, 1);this.$emit(`change`, { files: this.files });},showImage(previewSrc) {this.previewSrc = previewSrc;this.$refs.image.showViewer = true; //显示大图},clickFile(d) {if (this.disabled) return;if (typeof d === "number") {this.uploadBtn.click();} else {this.showImage(d);}},change(file) {if (this.files.length >= this.limit) {this.$message(`最多只能上传${this.limit}个文件`);} else {let fileSizeMB = file.size / 1024 / 1024; //转换文件大小(单位MB)if (this.maxSize && fileSizeMB > this.maxSize) {this.$message(`“${file.name}”文件大小超过${this.$g.getSize(this.maxSize * 1024 * 1024)}`);} else {this.files.push(file.raw);this.getImageSrc(file.raw);this.$emit(`change`, { files: this.files });}}},},
};
</script>
<style lang="scss" scoped>
.sgUploadImage {.uploadImages {display: flex;flex-wrap: wrap;align-content: flex-start;.uploadImage {flex-shrink: 0;margin-right: 10px;margin-bottom: 10px;position: relative;border-radius: 4px;width: var(--uploadImage_width);height: var(--uploadImage_height);/*背景图片*/background: #f5f7fa var(--background) no-repeat center / cover;img {width: 100%;height: 100%;object-position: center;object-fit: cover;}&:last-of-type {margin-bottom: 0;}&:hover {.remove-btn {opacity: 1;pointer-events: auto;}}.remove-btn {background-color: #f56c6c;border-radius: 88px;box-sizing: border-box;padding: 5px;color: white;cursor: pointer;transition: 0.2s;position: absolute;right: 10px;top: 10px;opacity: 0;pointer-events: none;&:hover {background-color: red;}}}}
}
</style>

应用

<sgUploadImage @change="getUploadFiles" />...getUploadFiles({ files }) {console.log(`获取上传文件:`, files);
},

基于基础的el-upload组件使用【实用的代码片段】基于elementUI的el-upload的上传文件对象获取代码片段,支持上传单个、多个File或文件夹(可以获取文件夹下钻子文件夹递归文件)-CSDN博客文章浏览阅读133次,点赞5次,收藏2次。文章浏览阅读192次。【代码】【sgUploadList】自定义组件:基于elementUI的el-upload封装的上传列表组件,适用于上传附件时。【sgUploadList】自定义组件:基于elementUI的el-upload封装的上传列表组件,适用于上传附件时-CSDN博客。https://blog.csdn.net/qq_37860634/article/details/144338242

相关文章:

【sgUploadImage】自定义组件:基于elementUI的el-upload封装的上传图片、相片组件,适用于上传缩略图、文章封面

sgUploadImage源码 <template><div :class"$options.name"><ul class"uploadImages"><liclass"uploadImage"v-loading"loadings[i]"v-for"(a, i) in uploadImages":key"i"click"click…...

Scala的隐式转换

一&#xff1a; 1.隐式转换概述&#xff1a; 隐式转换与模式匹配都是scala中提供的比较强大的特性。 2.隐式转换的定义&#xff1a; 在实际编程中&#xff0c;要想把一个不匹配的类型赋值&#xff0c;需要先转换成匹配的类型。scala的隐式转换会自动将一种类型的数据转换成…...

从视频编码的进化历程看技术革新

人类对影像的记录和传播从未停止。从最早的胶片电影到如今的数字视频&#xff0c;技术在不断演进。在这个过程中&#xff0c;视频编码技术的发展扮演着关键角色&#xff0c;它决定着我们如何高效地存储和传输视频内容。 视频编码技术的发展历程充满智慧。上世纪90年代&#xf…...

ECharts柱状图-阶梯瀑布图,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个柱状图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供…...

如何让Google快速收录你的页面?

要让Google更快地收录你的网站内容&#xff0c;首先需要理解“爬虫”这个概念。Google的爬虫是帮助它发现和评估网站内容质量的工具&#xff0c;如果你的页面质量高且更新频率稳定&#xff0c;那么Google爬虫更可能频繁光顾。通常情况下&#xff0c;通过Google Search Console&…...

比例负载分配L(P);动态调整服务率:LDS

目录 比例负载分配L(P) 动态调整服务率:LDS 速度缩放技术 比例负载分配L(P) 优点 简单直观:其调度器按照服务器服务率倒数比例分配负载,这种方式易于理解和实现,不需要复杂的计算和调整机制。例如,在一个小型企业内部的简单云计算环境中,若服务器配置相对单一且任务类型…...

C++ ——— 类的 6 个默认成员函数之 构造函数

目录 何为默认成员函数 一、构造函数 构造函数的概念 构造函数的特性 日期类的构造函数 栈的构造函数 编译器自动生成的构造函数 总结 何为默认成员函数 默认成员函数就是用户没有显示实现&#xff0c;但是编译器会自动生成的成员函数称为默认成员函数 一、构造函数 …...

win11 恢复任务栏copilot图标, 亲测有效

1、修改C:\Windows\System32\IntegratedServicesRegionPolicySet.json&#xff0c;解除中国不能使用copilot的限制。 使用Notepad搜索copilot全文搜索&#xff0c;将下面两处的“CN,”删除&#xff0c;删除后如下&#xff1a; {"$comment": "Show Copilot on t…...

计算机网络-IPSec VPN工作原理

一、IPSec VPN工作原理 昨天我们大致了解了IPSec是什么&#xff0c;今天来学习下它的工作原理。 IPsec的基本工作流程如下&#xff1a; 通过IKE协商第一阶段协商出IKE SA。 使用IKE SA加密IKE协商第二阶段的报文&#xff0c;即IPsec SA。 使用IPsec SA加密数据。 IPsec基本工作…...

Tomcat项目本地部署

前言&#xff1a; 除了在idea中将项目启动之外&#xff0c;也可以将项目部署在本地tomcat或者云服务器上&#xff0c;本片文章主要介绍了怎样将项目部署在本地tomcat 下面介绍如何使用Tomcat部署本地项目&#xff1a; 1、本篇文章使用的项目案例为一个聚合项目&#xff0c;ha…...

开源数据同步中间件(Dbsyncer)简单玩一下 mysql to mysql 的增量,全量配置

一、什么是Dbsyncer 1、介绍 Dbsyncer是一款开源的数据同步中间件&#xff0c;提供MySQL、Oracle、SqlServer、PostgreSQL、Elasticsearch(ES)、Kafka、File、SQL等同步场景&#xff0c;支持上传插件自定义同步转换业务&#xff0c;提供监控全量和增量数据统计图、应用性能预警…...

虚幻引擎开发命名规则

UE的命名规则如下&#xff1a; 模版类以T作为前缀&#xff0c;例如TArray, TMap, TSet。UObject派生类都以U前缀。AActor派生类都以A前缀。SWidget派生类都以S前缀。全局对象使用G开头&#xff0c;如GEngine。抽象接口以I前缀。枚举以E开头。bool变量以b前缀&#xff0c;如bPe…...

解释强化学习中的batch, epoch, episode有什么区别与联系,分别有什么作用

强化学习中的batch, epoch, episode 1.Batch1.1 最后一个batch不足32该怎么处理&#xff1f;1.1.1 方法一&#xff1a;丢弃最后一个不完整的 batch1.1.2 方法二&#xff1a;填充最后一个不完整的 batch1.1.3 选择哪种方法&#xff1f; 2.Epoch3.Episode4.区别与联系4.1 区别4.2…...

MVC基础——市场管理系统(一)

文章目录 项目地址一、创建项目结构1.1 创建程序以及Controller1.2 创建View1.3 创建Models层,并且在Edit页面显示1.4 创建Layou模板页面1.5 创建静态文件css中间件二、Categories的CRUD2.1 使用静态仓库存储数据2.2 将Categorie的列表显示在页面中(List)2.3 创建_ViewImport.…...

使用docker-compose安装Milvus向量数据库及Attu可视化连接工具

首先确保系统已经安装上了docker 然后去https://github.com/docker/compose/releases/下载安装docker-compose 跟随自己下系统和服务器情况下载 上传到服务器 mv docker-compose-linux-aarch64 docker-compose chmod x docker-compose2.dockr-compose命令 docker-compose …...

PostgreSQL函数中使用now()或current_timestamp的异同

在PostgreSQL函数中使用now()或current_timestamp可以获取当前的日期和时间。 now()函数返回当前的日期和时间&#xff0c;包括时区信息。它可以用于记录操作的时间戳或在查询中进行时间比较。 current_timestamp函数也返回当前的日期和时间&#xff0c;但不包括时区信息。它…...

开发类似的同款小程序系统制作流程

很多老板想要开发一款和别人家类似的同款小程序系统&#xff0c;但是不知道该怎么开发制作&#xff0c;本文就为大家详细介绍一下开发类似的同款小程序的流程为大家做参考。 一、前期准备找到对标小程序&#xff1a;首先&#xff0c;需要找到你想要模仿的同款小程序&#xff0…...

bsp是板级支持包

里面有很多的针对该型号的板子的函数&#xff0c;可以直接调用&#xff0c;也可以直接在里面。 也可以在vivado的sdk上&#xff0c;看到很多相关文档和寄存器偏移等等。...

P1784 数独 C语言(普遍超时写法)

题目&#xff1a; https://www.luogu.com.cn/problem/P1784 题目描述 数独是根据 99 盘面上的已知数字&#xff0c;推理出所有剩余空格的数字&#xff0c;并满足每一行、每一列、每一个粗线宫内的数字均含 1−9 &#xff0c;不重复。每一道合格的数独谜题都有且仅有唯一答案…...

基于最新的Apache StreamPark搭建指南

一、StreamPark 的介绍 官方文档:Apache StreamPark (incubating) | Apache StreamPark (incubating) 中文文档:Apache StreamPark (incubating) | Apache StreamPark (incubating)Github地址:https://github.com/apache/incubator-streampark Apache StreamPark™ 是一个…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...