点击el-upload之外的按钮,怎么判断el-upload里的文件是否上传
时间: 2023-09-04 09:06:44 浏览: 89
你可以使用 `ref` 属性给 `el-upload` 组件命名一个引用,然后在点击其他按钮时,通过引用获取 `el-upload` 组件实例,从而判断文件是否上传。具体代码可以参考如下示例:
```html
<template>
<div>
<el-upload
ref="upload"
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<el-button @click="checkUploadStatus">检查文件上传状态</el-button>
</div>
</template>
<script>
export default {
methods: {
// 判断文件是否上传
checkUploadStatus() {
const uploadInstance = this.$refs.upload.$refs.upload
if (uploadInstance.uploadFiles.length > 0) {
console.log('文件已上传')
} else {
console.log('文件未上传')
}
},
// 其他方法
beforeUpload() {},
handleSuccess() {},
handleError() {},
submitUpload() {},
},
}
</script>
```
在上面的示例中,我们给 `el-upload` 组件设置了 `ref="upload"`,然后在 `checkUploadStatus` 方法中获取 `el-upload` 组件实例,然后判断 `uploadFiles` 数组的长度是否大于 0,如果大于 0,则说明文件已经上传,反之则说明文件未上传。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231044901.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.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)
![](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)