element upload 钩子函数的坑及解决

目录
  • element upload 钩子函数的坑
  • element-ui中组件函数钩子自带参数,不能添加参数问题

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
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 如何在ElementUI的上传组件el-upload中设置header

    目录 在ElementUI上传组件el-upload中设置header element-ui中的upload组件使用总结 在ElementUI上传组件el-upload中设置header 在vue项目中我们发送ajax请求一般都会使用axios,并在axios中设置axios.defaults.baseURL,请求的基本地址,并在请求拦截器中设置headers axios.interceptors.request.use(config=>{   NProgress.start();   // 发

  • vue+element upload上传带参数的实例

    vue+element upload上传带参数的实例

    目录 element upload上传带参数 element上传函数带参数,自定义传参 下面这是标签 我将源码放上 这是需求案列 element upload上传带参数 <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">保存</el-button> <el-upload c

  • element中的el-upload附件上传与附件回显

    element中的el-upload附件上传与附件回显

    目录 1.上传 2.附件回显 开发中经常也会遇到附件的上传和回显,最方便的就是我们封装一个公共组件在页面中引用 1.上传 在src里面新建一个文件夹 <template> <el-upload class="upload-demo" multiple :limit="limit" :accept="accept" :headers="headers" :file-list="fileList&quo

  • 解决ElementUI组件中el-upload上传图片不显示问题

    解决ElementUI组件中el-upload上传图片不显示问题

    目录 ElementUI组件中el-upload上传图片不显示 element的上传图片后不显示照片的功能(原el-upload的修改) ElementUI组件中el-upload上传图片不显示 上传图片的方法有很多,我们可以通过input上传的功能来上传文件.文件夹.同时,我们也可以通过使用ElementUI中的el-upload标签来上传图片.视频.当我们使用el-upload来上传时往往出现上传的图片并不能显示的问题,如下图: 此时,从图中可以看出图片已经上传,但是并不显示图片,又或者出现

  • 解读element el-upload上传的附件名称不显示 file-list赋值

    解读element el-upload上传的附件名称不显示 file-list赋值

    目录 element el-upload上传的附件名称不显示 file-list赋值 问题 解决 el-upload上传附件-总结 FormData是什么? 使用步骤 element el-upload上传的附件名称不显示 file-list赋值 问题 上传附件后 文件名字不显示 解决 1.首先看file-list 是否在data中定义 2.如果定义了,文件名字还是不显示,在获取数据之后,把文件名字push到fileList中去,给name值赋值就可以显示了. this.fileList.pus

  • elementui使用el-upload组件如何实现自定义上传

    目录 使用el-upload组件实现自定义上传 方式一:选择后自动上传 方式二:选择后手动上传 使用el-upload上传文件夹 封装elementui el-upload文件上传组件 使用el-upload组件实现自定义上传 方式一:选择后自动上传 使用 http-request 覆盖默认的上传行为,可以自定义上传的实现 利用 before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise且被 reject,则停止上传 template 部分 <

  • element upload 钩子函数的坑及解决

    element upload 钩子函数的坑及解决

    目录 element upload 钩子函数的坑 element-ui中组件函数钩子自带参数,不能添加参数问题 element upload 钩子函数的坑 因为需求需要我将element 的upload组件放在了el-dialog中,但是坑就在这 看图片的上方是不是可以看到上传成功四个大字,但是它并不是真的在上传成功后显示出来的,只要页面加载成功,打开和关闭el-dialog都会出来这四个大字,来看代码 这是upload部分设置代码: (请忽略方法名称的不规范,这里只做个演示) on-succe

  • vue parseHTML源码解析hars end comment钩子函数

    目录 引言 chars源码: parseText end 源码: 引言 接上文  parseHTML 函数源码解析(六) start钩子函数 接下来我们主要讲解当解析器遇到一个文本节点时会如何为文本节点创建元素描述对象,又会如何对文本节点做哪些特殊的处理. parseHTML(template, { chars: function(){ //... }, //... }) chars源码: chars: function chars(text) { if (!currentParent) { {

  • CFileDialog的钩子函数解决对话框的多选之DoModal问题

    CFileDialog的钩子函数解决对话框的多选之DoModal问题

    前几天领导问我一个问题:就是使用CFileDialog类在设置多选时选中的文件所放的文件缓冲区不知设置多大合适,设置小了DoModal返回为失败, 通过CommDlgExtendedError函数获取错误码为FNERR_BUFFERTOOSMALL(即缓冲区太小),设置大了又浪费内存.(我们 一次要选几百个文件,实在不知设置多大合适). 我谈了我的思路:CFileDialog的数据成员m_ofn有一个数据成员为钩子函数指针,通过设置这个函数,可以勾取CFileDialog的相关消 息,比如用户改

  • 解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题

    项目需求:图片加载时,当鼠标滚动至当前图片进行加载并加上上滑特效,实现这个效果需要对文档文档滚动位置和图片的当前位置进行比较.但是mounted 钩子函数执行时img图片并未加载出来也就是占位为空,导致图片位置计算出问题. 解决这个问题,目前想到几种种方法 一.对mounted 钩子函数 中init方法加上延时 mounted: function() { this.$nextTick(() => { // 加上延时避免 mounted 方法比页面加载早执行 或者 对img进行块级化设置宽高进行

  • vue中父子组件传值,解决钩子函数mounted只运行一次的操作

    因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. beforCreate(创建之前) Created(创建之后) beforMount(载入之前) Mounted(载入之后) beforUpdate(更新之前) Updated(更新之后) beforDestroy(销毁之前) Destroyed(销毁之后) activate(keep-alive组

  • C语言中scanf函数的原样输入的坑及解决

    C语言中scanf函数的原样输入的坑及解决

    目录 scanf函数的原样输入的坑及解决 1.scanf函数格式控制后面输入 2.scanf函数的输入是有顺序的 3.最重要的一点就是scanf切记要原样输入 4.还有一个 scanf输入多个数据出现的问题 问题引出 执行原理 程序分析 解决方案 scanf函数的原样输入的坑及解决 scanf函数是C语言里一个输入函数,但其有很多地方需要注意: 1.scanf函数格式控制后面输入 的应该是变量的地址而不是变量本身(即变量名) 例,输入a,b 两个整型变量的值的时候,很多初学者会写成 scanf(

  • 解决Vue中mounted钩子函数获取节点高度出错问题

    遇到的问题 最近在开发一个Vue的项目,好几个页面都有用到一个 页面楼层滑动的组件,我就直接封装成了一个,但是遇到一个bug,就是我需要得到这个组件的offsetTop,然后页面滚动到这个位置的时候,就设置position属性为fixed,让他固定在屏幕上.问题是当我在mounted钩子函数中获取offsetTop的时候,在新开的页签中打开页面,会得到错误的offsetTop,但是在当前页面刷新,就不会有问题. 定位问题 后来查到问题,就是加载的问题,新窗口打开图片,默认是没有带缓存的,图片是G

  • Element-ui upload上传文件限制的解决方法

    Element-ui upload上传文件限制的解决方法

    问题 在accept中添加上传文件的类型只能起到"表面"作用,选择"所有文件"之后,还是可以上传任何类型的文件,根本起不到限制作用. 解决办法 在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传.)钩子里去做判断.这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断.

  • Vuerouter的beforeEach与afterEach钩子函数的区别

    Vuerouter的beforeEach与afterEach钩子函数的区别

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子,两种函数 1.全局钩子 2.某个路由的钩子 3.组件内钩子 两种函数: 1.Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/ 2.Vue.afterEach(function(to,form))/*在跳转之后判断*/ 全局钩子函数 顾名思义,

随机推荐