element-plus附件上传
时间: 2023-11-15 22:55:45 浏览: 83
element-plus提供了el-upload组件来实现附件上传功能。使用el-upload组件需要注意以下几点:
1. el-upload组件需要在form表单中使用,否则无法提交上传的文件。
2. el-upload组件需要设置action属性,指定上传文件的接口地址。
3. el-upload组件可以设置multiple属性,允许上传多个文件。
4. el-upload组件可以设置before-upload属性,用于在上传前对文件进行校验。
5. el-upload组件可以设置on-success属性,用于在上传成功后执行的回调函数。
下面是一个简单的el-upload组件的示例代码:
```
<template>
<el-form ref="uploadForm" :model="uploadForm" label-width="120px">
<el-form-item label="附件上传">
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload"
:on-success="onSuccess"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
uploadForm: {}
}
},
methods: {
beforeUpload(file) {
// 对文件进行校验
console.log('before upload:', file)
},
onSuccess(response, file, fileList) {
// 上传成功后执行的回调函数
console.log('upload success:', response)
}
}
}
</script>
```
阅读全文