Element UI 上传组件实现文件上传并附带额外参数功能
更新时间：2023年08月10日 11:05:28 作者：柯晓楠
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧
1. 需求
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时，如果单文件上传是比较简单的，但是在实际需求中，往往会在上传文件时伴随着一些其他参数，效果如下图：
在上传指定类型的文件时，例如HTTPS证书的文件类型必须为 .jks 格式，还必须要伴随一些额外的参数。
2. 思路
el-upload 上传组件提供了一些参数：
| 参数 | 说明 |
|---|---|
| data | 上传时附带的额外参数 |
| accept |
3. 示例代码
HTML代码：
<div class="upload-button">
<el-upload
ref="certificateUpload"
class="upload-container"
:action="uploadAPI"
:auto-upload="false"
name="multipartFile"
:with-credentials="true"
:data="uploadObjs"
:file-list="fileList"
accept=".jks"
:before-upload="onBeforeUpload"
:before-remove="onBeforeRemove"
:on-success="onUploadSuccess"
:on-error="onUploadError"
:on-change="onUploadChange"
>
<el-button type="primary" size="mini" icon="el-icon-upload2">选择证书</el-button>
</el-upload>
</div>JS代码：
export default {
data() {
return {
uploadAPI: '',
uploadObjs: {},
fileList: []
}
},
methods: {
// 文件上传前钩子
onBeforeUpload() {
// 可以在上传前的钩子函数中添加额外参数
this.uploadObjs = {
... // 添加的参数字段
}
},
onBeforeRemove() {
},
onUploadSuccess() {
},
onUploadError() {
},
onUploadChange() {
}
}
}到此这篇关于Element UI 上传组件实现文件上传并附带额外参数的文章就介绍到这了,更多相关Element UI 文件上传带参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
如果你也遇到在 vue 应用中，首页加载资源过多，导致加载缓慢的问题，下面的方法也许能帮到你，主要的处理思想是：让首页多余的资源能在需要它的时候再加载2022-09-09
在现代Web开发中,前后端分离已成为标准做法,Vue.js作为前端框架中的佼佼者,提供了丰富的API来处理数据和服务端的交互,其中一个常用的库是axios,本文将详细介绍如何在Vue项目中使用axios来调用JSON数据,需要的朋友可以参考下2024-09-09
vue3项目中配置sass,vite报错Undefined mixin问题
这篇文章主要介绍了vue3项目中配置sass,vite报错Undefined mixin问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了Vue3中结合ElementPlus实现弹窗的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
随着单页面应用程序(SPA)的日益流行,前端开发逐渐向复杂且交互性强的方向发展,在这个过程中,Vue.js及其生态圈的工具（如Vue Router）为我们提供了强大的支持,本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航,需要的朋友可以参考下2024-08-08
编程式路由在我们的项目使用过程中最常用的的方法了。这篇文章主要介绍了讲解vue-router之什么是编程式路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最近学习一下前端框架Vue,整体上感觉还是比较有意思的,但是在安装vue-cli脚手架的时候,出现了一些问题,解决问题也花费了不少时间,下面这篇文章主要给大家介绍了关于解决vue终端报错:不是内部或外部命令的相关资料,需要的朋友可以参考下2023-02-02
本篇文章主要介绍了详解通过JSON数据使用VUE.JS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了web前端vue实现插值文本和输出原始html，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论