elementui中el-upload上传后隐藏上传按钮
时间: 2023-07-18 13:18:43 浏览: 108
可以通过设置`show-upload-button`属性为`false`来隐藏上传按钮。例如:
```html
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:show-upload-button="false"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button slot="trigger" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
在上面的代码中,`show-upload-button`属性被设置为`false`,所以上传按钮被隐藏了。
相关问题
elementui中el-upload组件中list-type等于text时选中一个图片后隐藏上传样式
可以通过监听 `change` 事件,在回调函数中修改 `el-upload` 组件的样式来实现该功能。具体实现步骤如下:
1. 设置 `el-upload` 组件的 `list-type` 属性为 `text`,并且添加一个 `ref` 属性,用于在后面的代码中获取该组件的实例。
```html
<el-upload
ref="upload"
:action="uploadUrl"
:list-type="'text'"
@change="handleChange"
>
<el-button slot="trigger" size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
2. 在 `change` 事件的回调函数中,获取 `el-upload` 组件的实例,并且根据需要修改其样式。例如,可以通过设置 `display` 样式为 `none` 来隐藏上传按钮和上传提示信息,同时显示选中的图片。
```javascript
methods: {
handleChange(file, fileList) {
// 获取 el-upload 组件的实例
const uploadInstance = this.$refs.upload.$el;
// 修改 el-upload 组件的样式
uploadInstance.querySelector('.el-upload__input').style.display = 'none'; // 隐藏上传按钮
uploadInstance.querySelector('.el-upload__tip').style.display = 'none'; // 隐藏上传提示信息
uploadInstance.querySelector('.el-upload-list').style.display = 'block'; // 显示选中的图片
}
}
```
通过以上代码,当用户选择一个图片后,上传按钮和上传提示信息会被隐藏,同时选中的图片会被显示出来。
el-upload点击按钮后上传
el-upload 是一个基于 ElementUI 组件库开发的文件上传组件,支持点击按钮上传文件。
点击上传按钮后,el-upload 会弹出文件选择对话框,用户可以从本地选择需要上传的文件。选择完毕后,el-upload 会将选择的文件发送到服务器进行处理。在上传过程中,el-upload 会显示上传进度条,方便用户了解上传进度。
同时,el-upload 支持多种上传方式,例如:表单上传、拖拽上传、图片裁剪上传等。用户可以根据实际需求选择合适的上传方式。