解决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: /

总结

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

相关文章

  • vue中在vuex的actions中请求数据实例

    vue中在vuex的actions中请求数据实例

    今天小编就为大家分享一篇vue中在vuex的actions中请求数据实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法

    Vue突然报错doesn‘t work properly without JavaScript enabled

    最近在做项目的时候遇到了些问题,所以这篇文章主要给大家介绍了关于Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法,需要的朋友可以参考下
    2023-01-01
  • vue静态界面之左二级菜单右表单表格的实例代码

    vue静态界面之左二级菜单右表单表格的实例代码

    这篇文章主要介绍了vue静态界面之左二级菜单右表单表格,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • Vue中的基础过渡动画及实现原理解析

    Vue中的基础过渡动画及实现原理解析

    这篇文章主要介绍了Vue中的基础过渡动画原理解析,需要的朋友可以参考下
    2018-12-12
  • vue3的hooks用法总结

    vue3的hooks用法总结

    vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,这篇文章主要介绍了一文掌握vue3中hooks的介绍及用法,需要的朋友可以参考下
    2023-04-04
  • vue实现表单录入小案例

    vue实现表单录入小案例

    这篇文章主要为大家详细介绍了vue实现表单录入小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 解决Vue中使用keepAlive不缓存问题

    解决Vue中使用keepAlive不缓存问题

    这篇文章主要介绍了Vue中使用keepAlive不缓存问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • vue2.0使用Sortable.js实现的拖拽功能示例

    vue2.0使用Sortable.js实现的拖拽功能示例

    本篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • vue实现发表评论功能

    vue实现发表评论功能

    这篇文章主要为大家详细介绍了vue实现发表评论功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解vue中多个有顺序要求的异步操作处理

    详解vue中多个有顺序要求的异步操作处理

    这篇文章主要介绍了vue中多个有顺序要求的异步操作处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10

最新评论