elementUI el-upload自定义参数

本文介绍如何在ElementUI的el-upload组件中自定义上传文件的参数,提供了两种实现方法:通过data传参和使用:on-success回调函数。这两种方法帮助开发者在多个el-upload组件并存的场景下,准确地获取和处理上传文件的回调信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很多场景下,页面使用到多个el-upload组件,这个时候element并没有提供类似this的这么个东西,钩子函数的回调里面定位不到当前组件,可以通过以下两种方式获取到当前组件。

elementUI 提供的Upload 没有自定义回调参数可以通过以下两种方式实现

方法一: data传参,官网提供的data方式

在这里插入图片描述

具体写法为

	<el-upload
     :show-file-list="true"
      list-type="text"
      accept="image/*"
      :data="{index:index}"
    >
      <el-button size="mini" type="primary">上传图片</el-button>
    </el-upload>

这种方法会把data里面的参数放在请求体里面,需要后台童鞋配合,实现起来比较麻烦。

方法二::on-success="(value)=> handleSuccessImg(index, value)"

通过回调方式获取,将要传入的index值写进on-success方法里面,改成:on-success="(value)=> handleSuccessImg(index, value)"

 <el-upload
   :show-file-list="true"
    list-type="text"
    accept="image/*"
    :file-list="item.headImgList"
    :action="computedUploadImgUrl"
    :with-credentials="true"
    :on-success="(value)=> handleSuccessImg(index, value)"
    class="uploader"
  >
    <el-button size="mini" type="primary">上传图片</el-button>
  </el-upload>

如有问题请联系我~

欢迎加入QQ群:
在这里插入图片描述

### ElementUI `el-upload` 组件使用教程 #### 一、基本配置与属性设置 ElementUI 的 `el-upload` 组件用于文件上传操作,支持多种自定义选项来满足不同业务需求。为了实现基础的文件上传功能,开发者可以通过如下方式引入并初始化该组件: ```html <template> <div class="upload-demo"> <!-- 单个文件上传 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" list-type="picture"> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> <!-- 多文件批量上传 --> <el-upload drag multiple action="https://jsonplaceholder.typicode.com/posts/" style="margin-top: 20px;"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处,或点击上传</div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> ``` 上述代码展示了两种常见的文件上传模式——单文件上传和多文件批量上传,并设置了相应的提示信息。 #### 二、常见问题解决方案 ##### 页面闪动问题处理 当利用 `file-list` 属性展示已选中的文件列表时,可能会遇到页面闪烁的现象。对此可通过调整 CSS 样式的方式加以优化,在特定状态下隐藏某些元素从而减少视觉干扰[^2]。 ```css <style lang="scss" scoped> ::v-deep .el-upload-list__item.is-ready, ::v-deep .el-upload-list__item.is-uploading { display: none !important; } </style> ``` 此段样式规则针对处于准备状态(`is-ready`) 或正在上传 (`is-uploading`) 的文件项进行了不可见化处理,有效缓解了由于频繁更新 DOM 所引起的界面抖动现象。 ##### 防止表单提交引发的页面重载 对于嵌套于 `<el-form>` 表单项内的 `el-upload` 控件来说,默认情况下会触发整个表单的数据提交行为,进而造成不必要的页面跳转或是 URL 参数附加等问题。为了避免这种情况的发生,可以在父级容器上绑定事件监听器以拦截默认动作[^3]: ```vue <!-- Vue Template --> <form @submit.native.prevent> ... <el-upload ... /> ... </form> ``` 通过添加 `@submit.native.prevent` 指令能够确保即使用户误触提交按钮也不会影响当前浏览体验;当然也可以考虑重构布局结构使 `el-upload` 不再位于任何形式控件内部以此彻底规避潜在风险。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值