解决elementui上传组件el-upload无法第二次上传问题

 更新时间:2023年03月28日 09:53:58   作者:danbing2226  
这篇文章主要介绍了解决elementui上传组件el-upload无法第二次上传问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

elementui上传组件el-upload无法第二次上传

无需上传服务器的文件取消或者再次上传时失效的问题

<el-upload class="upload-demo" ref="upload" drag action="" :limit="1" accept=".csv" :show-file-list="false" :before-upload="onClickCsvBeforeupload">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">点这,或者拖到着</em></div>
</el-upload>

在组件中添加ref="upload"属性,无法第二次上传,主要原因是浏览器还保存着,我们已经上传的文件(无论你是否符合你的要求)。

敲黑板!!!!

this.$children[0].$children[0].$refs.upload.clearFiles();

主要是我们没有清除文件造成的,可以根据你的项目,用Document找到refs,然后参照上面的做法就可以再次上传了。困扰了我好久的问题,希望能帮到你。

el upload组件 第二次上传请求无效,非clearFiles方法

开发时遇到一个业务需求:

导入时如果当前列表月份存在数据将会提示用户是否要覆盖当前数据,点击确定进行二次提交

直接调用 submit 会无响应

  this.$confirm(`${response.msg},是否继续?`, '提示', {
          confirmButtonText: 确定,
          cancelButtonText: 取消,
          type: 'warning'
        }).then((res) => {
            // 直接提交会无响应
         this.$refs.upload.submit();
          
          }).catch(() => {})

查询其他资料会发现 大多数会让你 调用

 this.$refs["upload"].clearFiles()

这样的话会让用户重新添加,那么如何去节省该步骤呢? 

当第一次上传成功后回调 on-success 方法 可以获取到上传的文件,这时可以进行保存

 观察el-upload组件源码会发现存储文件的字段是 uploadFiles

el-upload组件部分源码:

因此可以自行调用该方法,去主动触发handleStart()方法进行上传

最后贴上正确步骤

  this.$confirm(`${response.msg},是否继续?`, '提示', {
          confirmButtonText: 确定,
          cancelButtonText: 取消,
          type: 'warning'
        }).then((res) => {
            // 先删除
          this.$refs["upload"].clearFiles()
          this.$nextTick(() => {
            // 再导入
            this.$refs["upload"].handleStart(this.fileList[0].raw)
            this.isUpdateSupport = 1
            // 再提交上传
            this.$refs.upload.submit();
          })
          
          }).catch(() => {})
User-agent: *
Disallow: /

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何去掉el-table中自带的边框线

    如何去掉el-table中自带的边框线

    文章介绍了如何去掉Element UI中el-table组件自带的边框线,通常情况下,el-table没有添加border属性,但仍然会出现边框线,可能的原因包括ElementUI的默认样式或表格的某些内置样式,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    这篇文章主要介绍了vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show,本文通过实例图文相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • Vue中Vue.extend()的使用及解析

    Vue中Vue.extend()的使用及解析

    这篇文章主要介绍了Vue中Vue.extend()的使用及解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中marker被识别点击的过程场景分析

    vue中marker被识别点击的过程场景分析

    这篇文章主要介绍了vue中marker被识别点击的过程场景分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • Vue2和Vue3中如何使用WebSocker封装详解

    Vue2和Vue3中如何使用WebSocker封装详解

    如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用,下面这篇文章主要给大家介绍了关于Vue2和Vue3中如何使用WebSocker封装的相关资料,需要的朋友可以参考下
    2024-07-07
  • vue3全局组件自动注册功能实现

    vue3全局组件自动注册功能实现

    本文主要讲述vue3的全局公共组件的自动注册功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-02-02
  • Vue3中页面跳转方式总结

    Vue3中页面跳转方式总结

    Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,它提供了多种方法来实现页面之间的导航,本文将详细介绍 Vue 3 中的各种页面跳转方式,有需要的小伙伴可以参考一下
    2024-12-12
  • 如何防止Vue组件重复渲染的方法示例

    如何防止Vue组件重复渲染的方法示例

    在 Vue.js 中,组件的重复渲染是一个常见的问题,可能会影响应用的性能和用户体验,为了提升应用的性能,开发者需要理解 Vue 的渲染机制,并应用有效的方法来避免不必要的组件重渲染,本文将深入探讨如何防止 Vue 组件重复渲染,并提供相关示例代码,需要的朋友可以参考下
    2024-10-10
  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    详解vue项目打包后通过百度的BAE发布到网上的流程

    这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下
    2018-03-03
  • vue使用urlEncode问题

    vue使用urlEncode问题

    这篇文章主要介绍了vue使用urlEncode问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论