element upload限制上传图片尺寸、大小、比例

桃扇骨 2021-11-15 13:38 757阅读 0赞

// 上传前判断
        public async beforeUpload(file: any) {
            const is1M = file.size / 1024 / 1024 < 3; // 限制小于3M
            if (!is1M) {
                this.$message.error('图片尺寸限制最小为270 x 270，大小不可超过3MB，比例为1:1');
                return false;
            } else {
                const isSize = new Promise((resolve, reject) => {
                    const width = 270;
                    const height = 270;
                    const _URL = window.URL || window.webkitURL;
                    const img = new Image();
                    img.onload = () => {
                        const valid = img.width >= width && img.height >= height && img.width === img.height;
                        valid ? resolve() : reject();
                    };
                    img.src = _URL.createObjectURL(file);
                }).then(
                    () => {
                        return file;
                    },
                    () => {
                        this.$message.error('图片尺寸限制最小为270 x 270，大小不可超过3MB，比例为1:1');
                        return Promise.reject();
                    },
                );
                return isSize;
            }
        }

看了很多还不如自己撸一个

发表评论取消回复

表情：

评论列表（有 0 条评论，757人围观）

还没有评论，来说两句吧...

相关阅读

相关用PHP接收element上传的图片,element upload上传图片后台收不到图片信息

class="upload-demo" ref="upload" drag :action="form.uploadUrl" :data="form.upLoadDat

╰半橙微兮°/ 2023年01月19日 04:48/ 0 赞/ 162 阅读

相关 js上传图片限制图片尺寸方法

上传图片限制图片尺寸 async beforeUploadPicture(file) { // 直播大图 const width = 347

怼烎@/ 2022年11月11日 05:25/ 0 赞/ 207 阅读

相关 element-ui upload组件上传文件类型限制

<el-upload class="c-upload" ref="upload" :action="actions"

浅浅的花香味﹌/ 2022年11月01日 13:50/ 0 赞/ 956 阅读

相关 js判断上传图片格式类型、尺寸大小

//判断图片类型 var f=document.getElementById("File1").value; if(f==" "){ ale

向右看齐/ 2022年10月02日 04:51/ 0 赞/ 219 阅读

相关 vue-element-admin上传图片的功能,限制图片大小-:before-upload=“handleImagesUrlBefore“

写在前面的而一些啰嗦的话: vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k G

悠悠/ 2022年09月05日 04:09/ 0 赞/ 167 阅读

相关 vue-element-admin上传图片的功能,限制图片大小-:before-upload="handleImagesUrlBefore"

写在前面的而一些啰嗦的话: vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k G

叁歲伎倆/ 2022年09月02日 11:59/ 0 赞/ 171 阅读

相关 Element-upload手动上传文件以及限制文件类型及大小

Element-upload手动上传文件以及限制文件类型及大小根据项目需求只能把上传功能做成手动上传 ![在这里插入图片描述][watermark_type_

Bertha 。/ 2022年08月29日 10:26/ 0 赞/ 406 阅读

相关 springmvc处理上传图片代码(校验图片尺寸、图片大小)

package com.maizuo.web.controller; import com.maizuo.domain.Result; imp

水深无声/ 2022年06月07日 05:15/ 0 赞/ 258 阅读

相关 element upload限制上传图片尺寸、大小、比例

// 上传前判断 public async beforeUpload(file: any) { const is1M = fil

桃扇骨/ 2021年11月15日 13:38/ 0 赞/ 758 阅读

相关 element ui 上传图片 el-upload的使用

el-upload图片上传的使用知识点： 1.http-request：图片上传的处理函数 2.on-remove:图片移除时的处理函数 3.根据文件获取文件

骑猪看日落/ 2021年07月25日 13:24/ 0 赞/ 553 阅读