el-upload 限制上传一张照片 上传后隐藏上传按钮
时间: 2023-07-13 07:23:51 浏览: 144
可以通过以下步骤实现:
1. 在 el-upload 组件中设置 `limit` 属性为 1,表示只能上传一张照片。
```html
<el-upload
class="upload-demo"
action="/upload"
:limit="1"
:show-file-list="false"
:on-success="handleSuccess">
<el-button slot="trigger" size="small" type="primary">上传照片</el-button>
</el-upload>
```
2. 给 el-upload 组件绑定一个 `on-success` 事件,当上传成功时,隐藏上传按钮。
```js
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后,隐藏上传按钮
this.$refs.upload.$children[0].$el.style.display = "none";
}
}
```
在 `handleSuccess` 方法中,通过 `this.$refs.upload.$children[0]` 获取到 el-upload 组件的子组件 el-upload-dragger,然后通过 `$el.style.display = "none"` 隐藏上传按钮。
同时,为了不显示已上传的文件列表,可以设置 `show-file-list` 属性为 false,如上述代码所示。
相关问题
elementui中el-upload上传后隐藏上传按钮
可以通过设置`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`,所以上传按钮被隐藏了。
el-upload限制上传大小
el-upload 组件可以通过设置 `limit` 属性来限制上传文件的大小,单位为字节。例如,设置 `limit` 为 2MB 的代码如下:
```html
<el-upload
class="upload-demo"
action="/upload"
:limit="2 * 1024 * 1024"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传不超过 2MB 的文件</div>
</el-upload>
```
在上述代码中,`:limit="2 * 1024 * 1024"` 表示限制上传文件的大小为 2MB,`:on-exceed="handleExceed"` 是在上传文件大小超过限制时触发的事件处理函数,`:before-upload="beforeUpload"` 是在上传文件前的钩子函数,可以在其中进行一些验证操作。同时,通过 `slot="tip"` 可以设置上传组件的提示信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)