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

最新推荐文章于 2025-05-14 11:44:14 发布

【金融科技蚂蚁】

最新推荐文章于 2025-05-14 11:44:14 发布

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： #前端组件库文章标签： vue.js 前端 css html elementui

本文链接：https://blog.youkuaiyun.com/liu__yuan/article/details/131200950

#前端组件库专栏收录该内容

10 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

在Vue项目开发中，当el-upload上传组件的默认尺寸不符合需求时，可以通过添加CSS样式进行调整。例如，通过设置/deep/.el-upload.el-upload-dragger的width和height属性，可以改变上传框的尺寸，同时调整图标大小和样式以达到预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<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文件，

了解本专栏