vue3 ts element-plus上传图片限制大小尺寸格式

在el-upload标签添加属性 :before-upload

<el-upload:before-upload="beforeAvatarUpload"name="img_file":data="{img_type: 3}"accept="image/jpg, image/jpeg, image/png">
</el-upload>

定义限制图片的方法

import {ElMessageBox, UploadProps, UploadUserFile} from 'element-plus'const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {return new Promise((resolve, reject) => {var reader = new FileReader();reader.onload = function (event) {var txt = event.target.result;var img = document.createElement("img");img.src = txt;img.onload = function () {if (img.width>196 || img.height>110) {ElMessage.error('图片尺寸最大为196*110')return reject(false);}}};reader.readAsDataURL(rawFile);if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {ElMessage.error('图片仅支持jpg、jpeg、png格式!')return reject(false);} else if (rawFile.size / 1024 / 1024 > 3) {ElMessage.error('图片大小不能超过3M!')return reject(false);}});}

vue3 ts element-plus上传图片限制大小尺寸格式相关推荐

vue3+ts+element封装一个简易的curd
vue3+ts+element封装一个简易的curd 闲来无趣做一个简单的table封装,不喜勿喷首先创建一个公共的Table.vue/pagination.vue文件 Table.vue < ...
js实现上传图片类型+大小+尺寸验证
图片类型+大小+尺寸验证 html代码: <input type="file" name="files" id="file" onch ...
vue3+ts+element 简单的登陆案例（一）
第一步创建vue3项目项目名字不能使用驼峰命名创建好项目目录我们需要引入自己的css文件来重订样式再index.html 文件夹中引入css html, body, div, span, a ...
vue 上传图片限制大小和格式
<div class="upload-box clear"><span class="fl">上传图片</span>< ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
vue3 使用Element Plus ＜script lang=“ts“ setup＞加上lang=“ts“后编译错误
vue3 使用Element Plus <script lang="ts" setup>加上lang="ts"后编译错误目录 vue3 使用Ele ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
php在苹果手机上传不了图片大小,ThinkPHP后台上传图片无默认尺寸解决方法
原标题:ThinkPHP后台上传图片无默认尺寸解决方法随着网站移动端的日益普及,对后台数据的兼容性要求也越来越高.后台数据涵盖范围不断扩大的同时,使得程序处理能力也必须逐步提高. 使用ThinkPH ...
《vue3+TS+element-plus 后端管理系统系列》之响应式设计
vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写. 演示地址:https:// ...

vue3 ts element-plus上传图片限制大小尺寸格式

vue3 ts element-plus上传图片限制大小尺寸格式相关推荐

最新文章

热门文章

vue3 ts element-plus上传图片限制大小 尺寸 格式

vue3 ts element-plus上传图片限制大小 尺寸 格式相关推荐

最新文章

热门文章

vue3 ts element-plus上传图片限制大小尺寸格式

vue3 ts element-plus上传图片限制大小尺寸格式相关推荐