Element UI 上传组件实现文件上传并附带额外参数
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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() {
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)