el-upload上传后十上传图标隐藏
时间: 2025-01-31 21:38:33 浏览: 67
### 实现 `el-upload` 组件上传成功后隐藏上传图标
为了实现当图片上传成功之后隐藏上传图标的逻辑,可以采用监听上传成功的事件并修改样式类的方式。具体方法是在 Vue 的模板部分设置条件渲染的 CSS 类,在 JavaScript 方法中处理上传完成后的状态更新。
#### HTML 结构与绑定属性
在 `<el-upload>` 标签内通过`:class`动态绑定一个对象来控制是否应用隐藏样式的 class:
```html
<template>
<div id="app">
<!-- 使用计算属性或数据模型驱动显示/隐藏 -->
<el-upload
:class="{ hide_box: upload_btn }"
action="#"
list-type="picture-card"
:on-success="handleSuccess">
<i slot="default" class="el-icon-plus"></i> <!-- 默认插槽放置加号图标 -->
</el-upload>
</div>
</template>
<style scoped>
/* 定义用于隐藏上传区域的CSS */
.hide_box {
display: none;
}
</style>
```
上述代码片段展示了如何利用 `v-bind:class` 来切换 `.hide_box` 这个自定义样式[^2]。
#### 处理上传成功的回调函数
每当有文件被成功上传时触发此函数,并在此处改变标志位的状态从而影响视图层的表现形式:
```javascript
<script>
export default {
data() {
return {
upload_btn: false // 初始状态下不隐藏按钮
};
},
methods: {
handleSuccess(response, file, fileList) {
this.upload_btn = true; // 成功上传后设为true以激活隐藏效果
}
}
};
</script>
```
这段脚本实现了响应上传操作的结果,一旦接收到服务器返回的成功消息,则将变量 `upload_btn` 设置为真值,进而使得对应的 DOM 节点获得新的样式[^1]。
阅读全文
相关推荐











通过cypress 上传文件并检查文件是否上传成功 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.37em" height="1em" viewBox="0 0 1920 1408" data-icon="fa:cloud-upload" class="iconify iconify--fa"></svg> 拖动文件到此处或点击上传 支持的文件格式:xls、xlsx、pdf、jpg、png、doc、docx、zip、rar、7z,不超过100M <input class="el-upload__input" name="file" multiple="" accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.zip,.rar,.7z" type="file"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>立项备案导出.xlsx<label class="el-upload-list__item-status-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg></label><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>按 delete 键可删除<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>sh001.jpg<label class="el-upload-list__item-status-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg></label><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"></svg>按 delete 键可删除







