解决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-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

    在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

    本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。感兴趣的朋友跟随小编一起看看吧
    2018-11-11
  • Vue Router的介绍与引入功能详解

    Vue Router的介绍与引入功能详解

    Vue Router 是 Vue.js 的官方路由,它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举,这篇文章主要介绍了Vue Router的介绍与引入,需要的朋友可以参考下
    2024-01-01
  • uniapp宽屏开发PC端方案及衍生问题解决办法

    uniapp宽屏开发PC端方案及衍生问题解决办法

    在uniapp中进行宽屏开发,主要是指在电脑端(PC端)使用宽屏显示效果进行应用的开发,这篇文章主要给大家介绍了关于uniapp宽屏开发PC端方案及衍生问题解决办法,需要的朋友可以参考下
    2024-03-03
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 一文带你搞懂Vue3中Pinia的使用

    一文带你搞懂Vue3中Pinia的使用

    用官网的一句话来说:Pinia 是 Vue的专属状态管理库,Pinia就是为vue3而生。本文将通过一些示例详细介绍一些Pinia的使用,希望对大家有所帮助
    2022-11-11
  • vue3图片剪裁插件vue-img-cutter使用小结

    vue3图片剪裁插件vue-img-cutter使用小结

    Vue.js是一款流行的JavaScript前端框架,很受用户喜爱,这篇文章主要介绍了vue3图片剪裁插件vue-img-cutter使用小结,本文结合示例代码讲解的非常详细,感兴趣的朋友一起看看吧
    2024-01-01
  • Vue如何实现变量表达式选择器

    Vue如何实现变量表达式选择器

    这篇文章主要介绍了Vue如何实现变量表达式选择器,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • 浅谈vue在html中出现{{}}的原因及解决方式

    浅谈vue在html中出现{{}}的原因及解决方式

    这篇文章主要介绍了浅谈vue在html中出现{{}}的原因及解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue.js,ajax渲染页面的实例

    vue.js,ajax渲染页面的实例

    下面小编就为大家分享一篇vue.js,ajax渲染页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue使用vue-drag-resize生成悬浮拖拽小球

    Vue使用vue-drag-resize生成悬浮拖拽小球

    这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论