elementui上传一张后还可以上传
时间: 2023-10-18 10:26:34 浏览: 89
在ElementUI中,你可以通过控制上传组件的`limit`属性来实现限制上传数量。设置`limit`为1即可限制只能上传一张图片。具体代码如下:
```html
<el-upload
action="http://localhost:8000"
list-type="picture-card"
:auto-upload="false"
:on-change="handleChange"
:limit="1"
:class="{ disabled: fileList.length > 0 }"
>
<!-- 其他内容 -->
</el-upload>
```
在`handleChange`方法中,你可以通过移除图片信息数组中的最后一项来实现上传后删除的效果:
```javascript
handleChange(fileList) {
if (fileList.length >= this.limitCount) {
// 如果上传数量已达到限制数量,禁用上传按钮
this.hideUpload = true;
} else {
this.hideUpload = false;
}
},
handleRemove(file) {
// 移除图片信息数组的最后一项
this.fileList.pop();
},
```
通过这样的代码,你可以实现在上传一张图片后还能继续上传的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [element-ui上传一张图片后隐藏上传按钮功能](https://download.csdn.net/download/weixin_38588520/13617874)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [elementUI上传图片后删除](https://blog.csdn.net/weixin_47695607/article/details/124227534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue中elementUI上传一张图片后,隐藏上传按钮](https://blog.csdn.net/weixin_43835827/article/details/105634977)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.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)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.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)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)