element upload 钩子函数的坑及解决

 更新时间:2022年10月08日 17:11:57   作者:琞、小菜  
这篇文章主要介绍了element upload 钩子函数的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element upload 钩子函数的坑

因为需求需要我将element 的upload组件放在了el-dialog中,但是坑就在这

看图片的上方是不是可以看到上传成功四个大字,但是它并不是真的在上传成功后显示出来的,只要页面加载成功,打开和关闭el-dialog都会出来这四个大字,来看代码

这是upload部分设置代码:

(请忽略方法名称的不规范,这里只做个演示)

on-success调用的方法

success () {
  this.$message.success('上传成功')
}

以上可以看出我们并没有上传文件,但是却触发了上传成功的钩子,不仅仅on-success是这样,on-error也是会被这样触发。

所以最后我把代码改成了如下:

el-upload部分代码:

<el-upload
        class="upload-demo"
        ref="upload"
        drag
        :action="uploadBusinessType"
        accept=".xls, .xlsx, .csv"
        :auto-upload="false"
        :on-success="handleAvatarSuccess"
        multiple
      >

方法的代码:

handleAvatarSuccess(...params) {
    ‘这里代码就不在表述'
    }

…params会返回一个数组,里边包含了这么一些东西

其中包含的有后端返回的请求成功的状态值,最终我是通过这个来判断是否上传成功,规避了在打开和关闭el-dialog就触发钩子的问题

element-ui中组件函数钩子自带参数,不能添加参数问题

在element-ui中的组件函数钩子一般都是自带参数如:

//上传组件
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="**beforeRemove**"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

API中解释:

on-remove 文件列表移除文件时的钩子 function(file, fileList)

也就是上面的beforeRemove函数自带file, fileList这两参数

beforeRemove(file, fileList){
//就这两参数
}

那么想要带自己的参数呢,,尤其一般在表格中的上传,肯定要携带当前一行的参数(动态参数)时;

我们对before-remove属性修改

//上传组件
<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="(file,fileList)=>{
     return beforeRemove(file,fileList,data)
}"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>

在before-remove上在return 一个函数,并携带data(自己想要的参数)

这样在函数beforeRemove中就可以拿到data了

beforeRemove(file,fileList,data){
debugger
}

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

相关文章

  • 如何使用vue-pdf-embed实现PDF在线预览

    如何使用vue-pdf-embed实现PDF在线预览

    vue-pdf-embed是一个基于Vue.js的插件,专门用于在Vue应用中嵌入和展示PDF文件,本文将使用vue-pdf-embed实现PDF在线预览功能,有需要的小伙伴可以参考一下
    2025-03-03
  • Vue配合iView实现省市二级联动的示例代码

    Vue配合iView实现省市二级联动的示例代码

    本篇文章主要介绍了Vue配合iView实现省市二级联动的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue3使用dayjs以及dayjs日期工具类详解

    Vue3使用dayjs以及dayjs日期工具类详解

    这篇文章主要介绍了Vue3使用dayjs以及dayjs日期工具类,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2组件进阶与插槽详解(推荐!)

    vue2组件进阶与插槽详解(推荐!)

    插槽(slot)作用是让父组件可以往子组件指定位置插入 html 结构,也是组件的一种通信方式,下面这篇文章主要给大家介绍了关于vue2组件进阶与插槽的相关资料,需要的朋友可以参考下
    2023-02-02
  • vue3-组合式api-provide/inject详解

    vue3-组合式api-provide/inject详解

    provide/inject 适用于跨级通信,在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值,下面通过实例代码介绍vue3-组合式api-provide/inject的相关知识,需要的朋友可以参考下
    2022-11-11
  • 如何在vue中使用jsx语法

    如何在vue中使用jsx语法

    本文主要介绍了如何在vue中使用jsx语法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用,文中通过实例介绍的非常详细,并在文末给出了源码下载,需要的朋友可以下载学习参考,下面来一起看看吧。
    2017-03-03
  • 解决vant的Cascader级联选择组建css样式错乱问题

    解决vant的Cascader级联选择组建css样式错乱问题

    这篇文章主要介绍了解决vant的Cascader级联选择组建css样式错乱问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • nextTick能否获取到最新dom原理解析

    nextTick能否获取到最新dom原理解析

    这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Vue2.0 实现页面缓存和不缓存的方式

    Vue2.0 实现页面缓存和不缓存的方式

    今天小编就为大家分享一篇Vue2.0 实现页面缓存和不缓存的方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论