element-ui 中 使用<el-upload></el-upload>组件,第二次点击上传无反应

出现问题:在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(); //上传成功之后清除历史记录**加粗样式**
}

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-10 08:24:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-10 08:24:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-10 08:24:04       82 阅读
  4. Python语言-面向对象

    2024-03-10 08:24:04       91 阅读

热门阅读

  1. SSRF漏洞原理及其修复方式和加固方式

    2024-03-10 08:24:04       41 阅读
  2. ubuntu root登陆桌面及ssh失败

    2024-03-10 08:24:04       40 阅读
  3. 剪枝例题一道

    2024-03-10 08:24:04       44 阅读
  4. linux的fseek函数

    2024-03-10 08:24:04       41 阅读
  5. Spring MVC | Spring MVC 的“核心类” 和 “注解”

    2024-03-10 08:24:04       29 阅读
  6. 安卓Kotlin面试题 41-50

    2024-03-10 08:24:04       37 阅读
  7. kotlin图片合成和压缩

    2024-03-10 08:24:04       43 阅读
  8. deeplearning with pytorch (五)

    2024-03-10 08:24:04       40 阅读
  9. 31. 下一个排列

    2024-03-10 08:24:04       40 阅读
  10. python中nonlocal简介及用法

    2024-03-10 08:24:04       44 阅读
  11. 详细比较Python、Julia、Rust

    2024-03-10 08:24:04       39 阅读