element组件
2021-02-07 本文已影响0人
白白白大爷_SimonLau
关键字： Upload 上传、element.ui、form
- upload手动触发上传
<el-upload ref="upload" :action="uploadUrl"
:auto-upload="false" :data="extraData"
accept=".xlsx,.xls,.pdf,.doc,.docx,.png,.jpg,.jpeg"
:onChange="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="localFileList">
</el-upload>
参数解析
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| action | 必选参数，上传的地址 | string | — | — |
| data | 上传时附带的额外参数 | object | — | — |
| auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
| on-success | 文件上传成功时的钩子(访问后端上传接口后会进入该回调) | function(response, file, fileList) | — | — |
| on-error | 文件上传失败时的钩子(后管接口404会进该回调) | function(err, file, fileList) | — | — |
| on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
首先，设置auto-upload为false，本地上传文件后，不会主动触发后端接口，需进行手动触发。
可设置上传的额外参数data, 通过组件的submit方法触发上传。
handleChange (file, localFileList) {
this.extraData = {
a: 'xx'
}
setTimeout(() => {
this.$refs.upload.submit()
})
}
附件本地上传后，只要触发了端接口后，无论是否成功都无法进行再次提交。可以把文件状态改为ready，则可以继续提交
handleSuccess(res, file, fileList) {
if (res && res.code === '000') {
//
} else {
this.fileList[0].status = 'ready'
}
本地上传文件后，会维护一个文件缓存列表localFileList，如果需要清除缓存可以调用clearFiles方法
handleError(error) {
this.$refs.upload.clearFiles()
}
- 官方文档
upload组件
form表单enter键导致页面刷新
@submit.native.prevent="eventHandler"
