vue封装文件上传组件
时间: 2023-12-30 20:01:59 浏览: 32
以下是Vue封装文件上传组件的示例代码:
```vue
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 处理上传成功的逻辑
},
beforeUpload(file) {
// 处理上传前的逻辑
}
}
}
</script>
<style scoped>
.upload-demo {
border: 1px dashed #409EFF;
border-radius: 6px;
padding: 20px;
text-align: center;
}
</style>
```
这个示例使用了Element UI的`el-upload`组件来实现文件上传功能。在模板中,我们使用了`el-upload`标签,并设置了上传的地址、上传成功的回调函数和上传前的校验函数。在`methods`中,我们定义了`handleSuccess`和`beforeUpload`两个方法来处理上传成功和上传前的逻辑。最后,我们使用了`scoped`样式来给上传区域添加一些样式。