【图片上传记录三】element-ui组件详解与封装(自定义上传、限制文件大小、格式以及图片尺寸)
业务上有需求是前端上传 jpg/png/gif 格式, 并且 尺寸为 150px * 150px,300px
*
300px,428*
428px 的图片
- 同时在上传的同时需要携带用户的个人信息以及其他额外信息
因此在 element-upload 基础之上
- 实现这个需求需要在上传前检查图片的大小,格式以及尺寸
- 如何上传也成为一个问题
- 使用组件的 action 上传方式, body属性传递参数
- 限制格式,加了一句:accept=“image/jpg,image/jpeg,image/png”
1-1 展示封装的组件
1-1-1 父组件
<uploadPic form-label="上传大图片" :before-load="beforeLargeUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureLarge" :upload-data="uploadLargeData" @changePicUrl="changePicUrl" /><uploadPic form-label="上传小图片" :before-load="beforeSmallUpload" :dialog-pic-visible="dialogPicVisible" :picture-large-dim="ruleForm.pictureSmall" :upload-data="uploadLargeData" @changePicUrl="changePicUrlSmall" /><script>
data(){return{dialogPicVisible: false,}
},
methods: {// 上传图片接收参数// 大图片changePicUrl(resUrl) {this.ruleForm.pictureLarge = resUrl},// 中间图片changePicUrlMedium(resUrl) {this.ruleForm.pictureMedium = resUrl},// 小图片changePicUrlSmall(resUrl) {this.ruleForm.pictureSmall = resUrl},// 上传大图片beforeLargeUpload(file) {// const isJPG = file.type === 'image/jpeg'const isLt2M = file.size / 1024 / 1024 < 2let is80x56 = trueconst reader = new FileReader()reader.readAsDataURL(file)reader.onload = (theFile) => {const image = new Image()image.src = theFile.target.resultimage.onload = () => {const { width, height } = imageif ((width !== 482) || (height !== 482)) {this.$message.error(`图片尺寸${width}*${height},请上传482*482 px 的图片!`)is80x56 = falsereturn}}}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}return new Promise((resolve, reject) => {(isLt2M && is80x56).catch(err => {return err})})},// 上传中图片// 上传小图片beforeMediumUpload(file) {const isLt2M = file.size / 1024 / 1024 < 2let is300 = trueconst reader = new FileReader()reader.readAsDataURL(file)reader.onload = (theFile) => {const image = new Image()image.src = theFile.target.resultimage.onload = () => {const { width, height } = imageif (width !== 150 && height !== 150) {this.$message.error(`图片尺寸${width}*${height},请上传 300*300 px 以下的图片!`)is300 = false}}}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')}return new Promise((resolve, reject) => {(isLt2M && is300).catch(err => {return err})})},}
</script>
1-1-2 子组件 uploadPic
<template><div><el-form-item :label="formLabel"><div style="display:flex; justify-content:space-between;"><el-input v-model="pictureLargeDim" placeholder="请点击上传按钮" :disabled="true" /><el-button type="primary" @click="dialogPicVisible = true">上传</el-button></div><el-dialog :title="formLabel" :visible.sync="dialogPicVisible"><el-uploadclass="upload-demo":limit="1"accept="image/jpeg,image/gif,image/png"dragaction="/config/upload":data="uploadData":before-upload="beforeLoad":on-success="handleAvatarSuccess":on-exceed="handleExceed"><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件,且不超过2MB</div></el-upload></el-dialog></el-form-item></div>
</template><script>
export default {props: {pictureLargeDim: {type: String,required: true},uploadData: {type: Object,required: true},formLabel: {type: String,required: true},// 判断是大小中图片上传beforeLoad: {type: Function,required: true}},data() {return {dialogPicVisible: false}},methods: {handleAvatarSuccess(res) {// this.ruleForm.pictureLarge = res.urlthis.$emit('changePicUrl', res.url)this.dialogPicVisible = falsethis.$message.success('上传成功')},handleExceed() {this.$message.warning('仅上传一张图片,删除之前的图片再进行之后的操作')}}
}
</script>
1-2
参考文章:https://blog.csdn.net/qq_41800366/article/details/113309320
- https://blog.csdn.net/qq_58340302/article/details/125939912
相关文章:
【图片上传记录三】element-ui组件详解与封装(自定义上传、限制文件大小、格式以及图片尺寸)
业务上有需求是前端上传 jpg/png/gif 格式, 并且 尺寸为 150px * 150px,300px*300px,428*428px 的图片 同时在上传的同时需要携带用户的个人信息以及其他额外信息 因此在 element-upload 基础之上 实现这个需求需要在上传前检查图片的大小,格式以及尺寸如何上传也成…...
一个golang版本管理工具
GitHub - moqsien/gvc: GVC is a productive tool to manage your dev environment for multi platforms and machines. | GVC 是一个用于快速配置和管理多机器跨平台的开发环境的生产力工具。 目前,gvc拥有以下功能或特点: go编译器自动安装和添加环…...

SpringBoot整合Spring Security过滤器链加载执行流程源码分析
文章目录1.引言2.Spring Security过滤器链加载1.2.注册名为 springSecurityFilterChain的过滤器2、查看 DelegatingFilterProxy类3.查看 FilterChainProxy类3.1 查看 doFilterInternal方法。3.2 查看 getFilters方法。4 查看 SecurityFilterChain接口5 查看 SpringBootWebSecur…...

Jest使用
一、测试到底测什么 提到测试的时候,即使是最简单的一个代码块可能都让初学者不知所措。最常问的问题的是“我怎么知道要测试什么?”。如果你正在写一个 Web 应用,那么你每个页面每个页面的测试用户交互的方式,就是一个很好的开端…...

定位于企业数字化底座,开箱可用(spring cloud+Vue)基础框架,赶紧收藏!
项目介绍:JVS是什么?JVS是企业级应用构建的基础脚手架,提供开箱即用的基础功能集成,其中集成了账户管理、租户管理、用户权限体系、三方登录、环境配置、各种业务日志等功能,还提供了对接低代码、数据中台的能力。JVS能…...
java字符统计
问题描述 给定一个只包含大写字母的字符串 � S, 请你输出其中出现次数最多的字符。 如果有多个字母均出现了最多次, 按字母表顺序依次输出所有这些字母。 输入格式 一个只包含大写字母的字符串 � S. 输出格式 若干个大写字母,代表答案。 …...

C#:Krypton控件使用方法详解(第八讲) ——kryptonBreadCrumb
今天介绍的Krypton控件中的kryptonBreadCrumb,下面开始介绍这个控件的属性:首先要介绍的是RootItem属性和外观属性:RootItem属性组中包含属性如下:image属性:代表在文字对象的前方插入一个图片,属性值如下图…...

2023从0开始学性能(1) —— 性能测试基础【持续更新】
背景 不知道各位大佬有没遇到上面的情况,性能这个东西到底是什么,还是以前的358原则吗?明显并不是适用于现在了。多次想踏入性能测试门槛都以失败告终,这次就以系列的方式来督促自己真正踏进性能测试的门槛。 什么是性能测试 通…...

如何通过一台 iPhone 申请一个 icloud 邮箱账号 后缀为 @icloud.com
总目录 iOS开发笔记目录 从一无所知到入门 文章目录需求关键步骤步骤后续需求 在 iPhone 自带的邮箱软件中添加账号,排第一位的是 iCloud 邮箱: 选 iCloud 之后: 提示信息是exampleicloud.com,也就是说是有icloud.com为域的邮箱…...
SQL89 计算总和
描述OrderItems表代表订单信息,包括字段:订单号order_num和item_price商品售出价格、quantity商品数量。order_numitem_pricequantitya110105a211100a21200a421121a5510a2119a775【问题】编写 SQL 语句,根据订单号聚合,返回订单总…...

Netty高级应用之:编解码器与群聊天室开发
Netty高级应用之:编解码器与群聊天室开发 文章目录Netty高级应用之:编解码器与群聊天室开发Netty编解码器Java的编解码Netty编解码器概念解码器(Decoder)编码器(Encoder)编码解码器CodecNetty案例-群聊天室聊天室服务端编写聊天室客户端编写Netty编解码器…...
Vue的生命周期
Vue的生命周期是指Vue实例从创建到销毁的过程,它包括了以下几个阶段:初始化、编译、挂载、更新、渲染和销毁。 初始化:Vue实例创建时,会执行初始化过程,主要包括以下几个步骤: 初始化数据:Vue…...

MySQL —— 数据库基础
文章目录1. centos7 安装Mysql2. 数据库的概念3. 数据库下创建库,表4. 库,表 的本质5. 数据库服务器 和 库 ,表的关系6. MySQL架构7. 存储引擎前言: 数据库是对数据进行管理的软件。1. centos7 安装Mysql 需要把系统自带的MySQL给…...

多线程知识点
多线程 基本知识 创建线程的常用三种方式: 继承Thread类实现Runnable接口实现Callable接口(JDK1.5>) public class ThreadTest extends Thread {Overridepublic void run() {System.out.println(this.getName() "..开始.."…...

有序表之红黑树
文章目录1、五个条件2、调整策略2.1 插入调整的情况2.1.1 情况一:插入节点是红色,其父节点也是红色2.1.2 情况二2.1.2 代码实现2.2 删除调整的情况2.2.1 情况一:双重黑节点的兄弟节点也是黑色,且其兄弟的两个孩子也是黑色2.2.2 情…...
HTTP状态码都有哪些?
100:客户必须继续发出请求 101:客户要求服务器根据请求转换HTTP协议版本 二:2xx 200:交易成功 201:提示知道新文件的URL 202:接受和处理、但处理未完成 203:返回信息不确定或不完整 204&#…...

Sketch+摹客,100M文件上传最快47s
哈喽,小摹来啦~ 去年12月底,摹客Sketch插件上新了「规范检查工具」,自功能上线以来,小摹收到了许多的好评及赞扬。 虽好评如潮,但我们不会止步不前,将持续攻克难点,旨在为大家提供更加稳定高效…...
关系型数据之分区分表分库
文章目录1.为什么需要分区分表分库2.各种分区分表分库的情况3.弊端3.1分区弊端3.2分表分库弊端1.为什么需要分区分表分库 数据量达到一定规模,进行常规的sql语句优化已经效果不大的情况下,常见为mysql数据库,单表的记录达到1000W和空间占用至…...
微信小程序:基本开发相关文档
1、微信公众平台(后台登录页):https://mp.weixin.qq.com/2、微信小程序官网文档(组件api等):https://developers.weixin.qq.com/miniprogram/dev/component/audio.html3、微信开放社区(问题社区…...

Win10关闭自动更新
Win10关闭自动更新第一步:修改电脑系统时间第二步,设置自动更新时间第三步:再次修改系统时间为正确时间因为国内使用的操作系统,很多是非正版的系统,如果更新了系统,很容易造成电脑蓝屏,系统运…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
实现弹窗随键盘上移居中
实现弹窗随键盘上移的核心思路 在Android中,可以通过监听键盘的显示和隐藏事件,动态调整弹窗的位置。关键点在于获取键盘高度,并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式(本地调用) SSE模式(远程调用) 4. 注册工具提…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...