el-upload on-change 的用法
时间: 2023-07-18 10:33:13 浏览: 113
el-upload 是 Element UI 提供的上传组件,on-change 是该组件中的一个事件,它会在上传文件改变时被触发。你可以在 on-change 事件中编写相应的处理函数来处理上传文件的相关操作。
下面是 el-upload on-change 的用法示例:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-change="handleChange"
:auto-upload="false"
:file-list="fileList"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleChange(file, fileList) {
console.log(file, fileList);
// 在这里可以编写上传文件的相关操作,比如展示上传成功或失败的提示信息
}
}
}
</script>
```
在上述示例中,我们定义了一个 el-upload 组件,并将 on-change 事件绑定到 handleChange 方法上。在 handleChange 方法中,我们可以通过参数 file 和 fileList 来获取上传的文件信息,然后根据需要进行相应的处理。