element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
原创element-ui 中 使用＜el-upload＞＜/el-upload＞组件，第二次点击上传无反应
原创
用户4396583
发布于 2024-08-13 09:02:37
发布于 2024-08-13 09:02:37
文章讲述了在Vue项目中使用el-upload组件时遇到的文件上传问题，即第二次点击按钮无响应。原因在于上次上传的文件流未被清除。作者提供了通过ref关联组件并在
on-success回调中调用clearFiles()方法来解决这个问题。
出现问题：在vue 项目中使用el-upload 组件，实现文件上传的功能，第一次点击可以上传，第二次点击按钮无反应
出现此问题的原因：由于上次上传的文件流还在，未被清除
解决办法
- 通过
ref与组件进行关联
<el-upload
ref="fileUploadBtn"
class="upload-demo"
accept=".xls,.xlsx"
:limit="1"
:action="uploadFileUrl"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:data="uploadData"
:show-file-list="false">
<el-button size="medium" type="primary">导入</el-button>
</el-upload>- 在上传成功的函数中进行清空流文件
handleAvatarSuccess(response, file, fileList) {
this.$refs.fileUploadBtn.clearFiles(); //上传成功之后清除历史记录**加粗样式**
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录
腾讯云开发者
