el-upload限制文件大小(图片尺寸)

1. 在el-upload控件中加入on-change方法:

<el-upload id="file"ref="upload"slot="append":action="file.action":with-credentials="true"name="file":data="file.data":show-file-list="false"accept=".xls,.xlsx,.csv":disabled="isDisabled":auto-upload="false":on-change="handleChangeFile"><el-button class="file_upload"type="default"></el-button><label for="file"class="file-btn h-icon-folder"></label>
</el-upload>

2. 在on-change方法中处理:

handleChangeFile (file, fileList) {this.isDisabled = falseif (!file) returnvar testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)const isLt2M = file.size / 1024 / 1024 < 50if (testmsg !== 'xls' && testmsg !== 'xlsx' && testmsg !== 'csv') {this.$refs.upload.clearFiles()this.$message({message: '上传文件只能是 .xls、.xlsx、csv格式!',type: 'warning'})return false}if (!isLt2M) {this.$refs.upload.clearFiles()this.$message({message: '上传文件大小不能超过 50MB!',type: 'warning'})return false}this.fileName = file.name
}

3.作为补充, 如果对图片的尺寸有限制也可以实现的(这里只做补充, 此文件中没用到):

// 说明: 这部分代码不是本项目的,扩展
onchange (file) {let isLt = file.size / 1024 < 200 // 判断是否小于200Kbif (!isLt) {this.$message.warning('图片大小不能超过200KB! 请重新上传')this.$refs.upload.clearFiles()this.basicForm.image = ''this.basicForm.imageFile = []} else {this.asyncImgChecked(file).then(data => {if (data) {this.basicForm.image = file.namethis.basicForm.imageFile = file} else {this.basicForm.image = ''this.basicForm.imageFile = []this.$refs.upload.clearFiles()this.$message.warning('图片尺寸不小于64 X 64')}})}
},
// 计算图片尺寸
asyncImgChecked (file) {return new Promise((resolve) => {let reader = new FileReader()reader.readAsDataURL(file.raw) // 必须用file.rawreader.onload = () => { // 让页面中的img标签的src指向读取的路径let img = new Image()img.src = reader.result// console.log(`1当前文件尺寸大小：${img.width}×${img.height}`)if (img.complete) { // 如果存在浏览器缓存中if (img.width < 64 || img.height < 64) {resolve(false)} else {resolve(true)}} else {img.onload = () => {if (img.width < 64 || img.height < 64) {resolve(false)} else {resolve(true)}}}}})
}

el-upload限制文件大小(图片尺寸)相关推荐

element-upload 自定义上传、限制文件大小、格式以及图片尺寸
文章目录 element-upload 自定义上传.限制文件大小.格式以及图片尺寸 1. 前言 2. 完整实现示例 element-upload 自定义上传.限制文件大小.格式以及图片尺寸 1. 前言 ...
改变图片尺寸，文件大小，分辨率300dpi的方法
一.改变图片尺寸使用电脑自带的"画图"软件,如下图1所示,点击"重新调整大小":之后可点击像素,修改图片尺寸大小,如图2所示. 图1 画图软件截图图2 二. ...
jquery file upload 限制上传文件的格式、大小或图片尺寸
限制文件格式.大小 $("#head").fileupload({url: "/front/user/uploadHead",dataType: 'json', ...
C#减少图片文件大小和尺寸（转）
有一个员工管理,需要在数据库字段中保存员工的照片,但已有的照片非常巨大,1024*768, 2M左右,这么大的数据存入数据库,不管是对管理或是传输都是问题,而实际上登记照只要很小就行了,下面进行减肥( ...
python怎样批量修改文件大小_python:批量修改文件名批量修改图片尺寸
功能:批量修改图片尺寸图像的几何变换,如缩放.旋转和翻转等,在图像处理中扮演着重要的角色,python中的Image类分别提供了这些操作的接口函数,下面进行逐一介绍. 1.图像的缩放图像的缩放使用 ...
使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
python更改图片存储大小_python不改变图片尺寸压缩到指定大小
python不改变图片尺寸压缩到指定大小 import base64 import io import os from PIL import Image from PIL import ImageFi ...
Python 图片尺寸缩放的4种方式
微信公众号" 程序猿刘先森", 共同学习- https://darylliu.github.io/archives/9c4cfe08.html 最近由于网站对图片尺寸的需要,用py ...
照片整理工具（日历相册, 重复文件清理, 手机照片同步, 图片尺寸缩减）
最近整理了多年以来积攒的照片,过程中没找到很合适的工具来解决需求,便自己动手写了一番.后面把总结的方法融入到代码中,添加了通过命令行运行的脚本,分享出来希望也能解决你的问题. GitHub: http ...
饿了么el-upload上传图片限制图片尺寸、大小、格式
饿了么中的Upload组件已经提供了限制用户上传的图片格式和大小的例子(https://element.eleme.io/#/zh-CN/component/upload),在此又新加图片的尺寸 &l ...

el-upload限制文件大小(图片尺寸)

el-upload限制文件大小(图片尺寸)相关推荐

最新文章

热门文章