设置el-upload上传框的尺寸大小

柔光的暖阳◎ 2023-10-12 15:21 2阅读 0赞

在实际vue项目开发中，有时el-upload上传框的默认长度和宽度不是自己想要的，这就需要自行修改，方法也简单，先上效果对比图：

![e4d3fc36e2d042c29517e91bd5e20e65.png][]**默认的上传框尺寸**

若要修改尺寸，则添加如下代码即可：

<template>
        <div id="upload">
            <el-upload drag multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1Mb</div>
            </el-upload>
        </div>
    </template>
    
    <script></script>
    
    <style scoped>
    .el-icon-upload:before {
        content: '\e7c3'   //设置图标
    }
    .el-icon-upload {
        font-size: 30px;      //图标的尺寸大小
        margin: 4px 0 2px;   //图标与四周元素的间距
    }
    //下面这几行代码就是设置上传框的长宽，可以按百分比来设置也可以用px去设置
    /deep/ .el-upload .el-upload-dragger {
        width: 120%;
        height: 80%;
    }
    </style>

上面的样式代码中**scoped**是必要的，缺少可能会导致显示不出预期的效果，下面来看修改后的效果图：

![81f6b00834554b53ac75dd4cf4c81412.png][]**调整后的上传框尺寸**

[e4d3fc36e2d042c29517e91bd5e20e65.png]: https://img-blog.csdnimg.cn/e4d3fc36e2d042c29517e91bd5e20e65.png
[81f6b00834554b53ac75dd4cf4c81412.png]: https://img-blog.csdnimg.cn/81f6b00834554b53ac75dd4cf4c81412.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript头像图片上传插件支持上传类型大小尺寸验证

一行代码实现头像上传，图片大小、尺寸，类型验证 html调用 <img src="这里放默认头像" id="preview" onclick="uploader

清疚/ 2024年03月22日 10:12/ 0 赞/ 74 阅读

相关设置el-upload上传框的尺寸大小

在实际vue项目开发中，有时el-upload上传框的默认长度和宽度不是自己想要的，这就需要自行修改，方法也简单，先上效果对比图： ![e4d3fc36e2d042c2951

柔光的暖阳◎/ 2023年10月12日 15:21/ 0 赞/ 3 阅读

相关 MediaWiki上传文件大小设置

一、概述 MediaWiki默认最大上传文件大小为2M，碰到文件较大需要修改这个限制，需要改为8M。二、修改php.ini 使用docker运行的Medi

╰+攻爆jí腚メ/ 2023年06月23日 05:52/ 0 赞/ 367 阅读

相关 spring设置上传文件大小

文章目录 spring设置上传文件的大小全局设置个别接口单独设置 nginx设置文件大小

「爱情、让人受尽委屈。」/ 2022年11月18日 04:46/ 0 赞/ 468 阅读

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

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

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

相关 js获取上传图片真实的尺寸大小和存储大小

</pre><pre name="code" class="html"><input id="file" type="file"> <input id="But

快来打我*/ 2022年07月15日 16:22/ 0 赞/ 289 阅读

相关 GitHub上传文件大小设置

进入GitHub命令窗口，输入命令：[Git][] config http.postBuffer 524288000 之前[git][Git]中的配置是没有这一项的,执行完以

分手后的思念是犯贱/ 2022年06月14日 11:39/ 0 赞/ 324 阅读

相关文件上传设置上传文件大小

控制台报错 org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededExcept

男娘i/ 2022年04月17日 05:08/ 0 赞/ 408 阅读

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

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

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

相关设置 php 上传文件大小

upload_max_filesize=200M post_max_size=0 　　转载于:https://www.cnblogs.com/psy-sd

秒速五厘米/ 2021年09月30日 01:50/ 0 赞/ 441 阅读