element UI el-upload多张图隐藏上传空间

最新推荐文章于 2024-04-27 17:39:22 发布

曲小强

最新推荐文章于 2024-04-27 17:39:22 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/108767459

CSS 专栏收录该内容

40 篇文章

订阅专栏

先包裹displayNone一个class名然后通过css隐藏

<div class="displayNone">
   <el-upload
     action="#"
     list-type="picture-card"
     :on-preview="handlePictureCardPreview"
     :file-list="fileList">
     <i class="el-icon-plus"></i>
   </el-upload>
 </div>

记住写全局的

<style>
  .displayNone div .el-upload--picture-card{
    display: none!important;
  }
</style

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曲小强

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

el-upload限制只上传一张图片并隐藏右侧的上传区域

weixin_59395272的博客

01-12

2527

使用 element UI 中的el-upload 如何限制上传一张图片后隐藏右侧的上传区域

element ：解决Upload 上传显示多张图片的问题（已解决）

qq_39918566的博客

06-15

4727

目录：一、我的需求：二、结果描述：三、相关的代码一、我的需求：实现上传图片，并且只上传一张，多了上传后也只显示第一张上传的图片，上传后只显示上传的图片，不显示上传按钮的+号以及那个方框盒子。取消上传或者上传后再删除上传的图片，要显示方框盒子二、结果描述：上传前:显示默认的图片，以及鼠标悬停在图片处提示可以修改的字（“点击修改头像”），如下上传后：只显示当前上传的图片（不显示多张），如：控制对话框的部分代码。 <el-dialog title="修改个人信息" :visible.s

参与评论您还未登录，请先登录后发表或查看评论

遇到的Vue elementUI图像上传不显示的问题

lgs7907

07-26

5413

编者：李国帅 qq：9611153 微信lgs9611153 时间：2021-7-26 问题描述: 在使用Vue elementUI图像上传组件el-upload的时候，发现如果ruleForm没有原始数据，上传图片后，图片无法显示。于是经过仔细的分析比较，发现只要把<el-form-item的绑定属性和<el-upload内部<img的属性设置为不同变量，上传完成后设置img的src即可。解决方案: <el-dialog ti...

vue element-ui 上传多张图片并展示

m0_68336608的博客

03-29

1366

如果你只是想图片展示的话，那就不必写转为base64了,另外这个数据是添加图片时尽管是三张一起添加，但是里面的beforeAvatarUpload代码此时执行了三次，你表面看着他是三张图片一起添加，但其实它是先添加第一张，然后添加第二张的时候是第一张清除，然后12一起添加，添加第三张的时候是把前面12张全部清空，再添加123,我的能力无法实现只执行第三次,所以这样可能会造成代码的冗余性增加.大家如果有更好的选择，可以试试其他博主的方法。但是这个确实可以运行，我是试验过的!

element-ui上传一张图片后隐藏上传按钮功能

10-16

主要介绍了element-ui上传一张图片后隐藏上传按钮功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

vue element-ui的el-upload上传图片校验

且听风吟的博客

07-28

3192

element-ui的el-upload上传图片相关校验，记录笔记组件封装： <template> <div class="el-img-upload-container"> <div class="el-img-upload" :class="{'limit-num': fileList.length>=limit, 'mini': size === 'small'}"> <el-upload :action="url" :file

Element-ui向Java服务器一次性发送多个图片

shenshaoming的博客

12-30

563

前言生活举步为艰,时间就像海绵里的水,挤一挤总会有的,不过,精力却是有限的- -。最近有个需求,需要用Element-ui向后台一次性发送多张图片,并且还要结合一些字符串数据。在之前的SSM通过工具类实现单图片和多input框数据存储到数据库中，我是从HttpServletRequest里面直接取出来的数据,没有用到Spring Mvc的MultipartFile类。这一次想着还按照之前那...

使用element 自定义上传组件（http-request属性）时界面抖动（重复显示新增动画回显）

XZH1730932805的博客

04-16

2799

自定义显示遇到显示完成新增动画，上传完成之后又重复显示新增动画的问题参考博客以及element-ui组件el-upload自定义上传时界面抖动问题1：使用 http-request 不能触发 on-success 函数。　　原因：　　使用 http-request 时，需要返回 promise 对象，才会触发 on-success。解决方法：　　将 ttp-request 函数结果返回 promise 对象即可。问题2：上传抖动问题原因：一般使用自...

Element-ui上传图片按顺序展示

weixin_30919571的博客

08-27

2310

背景不知道你上传图片的时候有没有过这样的情况，批量上传多张图片，可能因为图片大小或者网络问题，导致图片返回的顺序和上传时的顺序不一样。因为我们公司是做电商的，即使我们的支持拖动排序，运营还是希望图片能够严格的按照他们上传的顺序展示。解决问题在上传组件的on-success的方法中，有3个参数 response, file, fileList其中fileList就是之前上传成...

Element-ui实现合并多图上传（一次请求多张图片）

weixin_34129145的博客

07-31

4838

前言工作中碰到需要多图上传，在使用element-ui解决过程中碰到一些问题，在这里分享给大家。环境： Springboot+Vue+Element-ui 正文这次上传使用的是Elemet-ui的uoload上传组件，组件预留的钩子回调还是比较充足的。实现多图上传主要用到以下两个属性： Elemet-ui是自带多图上传的，但是...

element el-upload 只用来显示时的空行问题

小学僧的学习笔记

05-26

289

<el-upload style="display: grid;" ... > </el-upload>

element ui 多张图片上传、回显、删除

m0_70023962的博客

07-25

3289

提交前截取字符串获取图片信息到后台请求，各位大佬挑选自己用的到的部分复制修改一下就行。

Upload上传图片，回显图片，编辑图片，限制图片，不显示上传图标，图片放大功能

weixin_46041322的博客

12-27

990

实现逻辑：新增时用imgs字段来存储新增的图片；编辑时用imgVos字段来接收新增的图片、imgs中存贮后端返回（上次存储）的图片；若为编辑状态给后端提交时：将所有的新增图片放到imgs中，之前（后端返回的图片地址）放到imgVos中。:file-list="repairPlanfiles"，repairPlanfiles用来存储图片。因小编项目图片数组可以动态累加，相对有点复杂，若你们的不存在动态添加，只有一条，页面。新增、编辑时：限制上传四张，当超过四张隐藏上传图标。详情、编辑：图片回显。

vue使用element-ui上传多张图片、回显，编辑、删除、上传数量以及上传按钮的隐藏

weixin_43477423的博客

05-10

7407

一、显示界面部分： <el-upload ref="upload" action="" :auto-upload="false" //禁止自动上传 :file-list="fileList" //上传的文件列表 :limit="limit" // 最大允许上传个数 :class="{hide:hideUpload}" //上传按钮 :on

element-ui, upload组件的显示与隐藏以及图片大小的控制

weixin_47711284的博客

05-28

4850

需求要求：上传图片不超过五张，每张图片不超过20M，达到五张限制后自动隐藏上传组件实现 HTML代码：关键代码 :class="{‘hide’:hideUploadAdd}"，这个是样式控制 <el-upload action=" " list-type="picture-card" multiple :limit="5" :file-list="file

elementUI只显示单张图片

热门推荐

weixin_44111864的博客

05-12

2万+

项目开发中要求最多只能上传3张图片，最后一张图片上传完成后隐藏上传按钮，解决方法如下： <el-upload :class="{uoloadSty:showBtnDealImg,disUoloadSty:noneBtnDealImg}" :action="dealImgUrl" list-type="picture-card" :on-preview="handleDealImgPreview" :on-remove="handleDealImgRemove" :on-success="s

在echarts中用el-radio-button按钮实现同一张图切换不同使用fetch后端传来的数据

05-29

要实现在echarts中用el-radio-button按钮切换不同的数据，可以先在vue中定义一个变量来存储当前选中的数据源，例如： ``` <template> <div> <el-radio-group v-model="selectedSource"> <el-radio-button :label="source1">数据源1</el-radio-button> <el-radio-button :label="source2">数据源2</el-radio-button> <el-radio-button :label="source3">数据源3</el-radio-button> </el-radio-group> <div id="chart"></div> </div> </template> <script> export default { data() { return { selectedSource: 'source1', // 默认选中数据源1 source1: [], // 数据源1 source2: [], // 数据源2 source3: [], // 数据源3 } }, methods: { fetchData() { // 使用fetch获取数据，并将返回的数据赋值给对应的数据源 fetch('/api/data1').then(response => response.json()).then(data => this.source1 = data) fetch('/api/data2').then(response => response.json()).then(data => this.source2 = data) fetch('/api/data3').then(response => response.json()).then(data => this.source3 = data) }, renderChart() { // 根据当前选中的数据源渲染图表 const data = this[this.selectedSource] // 使用echarts绘制图表 const chart = echarts.init(document.getElementById('chart')) chart.setOption({ // 配置图表选项 series: [ { type: 'bar', data, }, ], }) }, }, mounted() { this.fetchData() // 获取数据 this.renderChart() // 渲染图表 }, watch: { selectedSource() { this.renderChart() // 监听选中的数据源变化，重新渲染图表 }, }, } </script> ``` 在上面的代码中，我们定义了一个selectedSource变量来存储当前选中的数据源，然后在模板中使用el-radio-button按钮来选择不同的数据源。在mounted钩子函数中，我们调用fetchData方法来获取数据，在renderChart方法中根据当前选中的数据源渲染图表。同时，我们使用watch监听selectedSource变量的变化，一旦变化就重新渲染图表。

element UI el-upload多张图 隐藏上传空间

element UI el-upload多张图隐藏上传空间