element-ui 上传文件的组件
时间: 2023-09-05 11:14:10 浏览: 107
Element UI 提供了一个上传文件的组件,可以方便地实现文件上传功能。该组件的名称是 `el-upload`。
你可以使用以下代码来创建一个基本的文件上传组件:
```html
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload">
<el-button>点击上传文件</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 上传成功后的处理逻辑
console.log(response);
},
beforeUpload(file) {
// 文件上传前的处理逻辑
console.log(file);
}
}
}
</script>
```
在上面的代码中,`el-upload` 组件使用 `action` 属性指定了文件上传的接口地址。`on-success` 属性指定了上传成功后的回调函数,可以在该回调函数中处理上传成功后的逻辑。`before-upload` 属性指定了文件上传前的回调函数,可以在该回调函数中执行一些文件上传前的额外处理。
需要注意的是,你需要根据自己的需求修改接口地址和回调函数中的逻辑。
另外,Element UI 的上传组件还提供了很多其他的功能和配置项,如限制文件类型、限制文件大小、显示上传进度等。你可以查看 Element UI 的官方文档以获取更多关于 `el-upload` 组件的详细信息。
阅读全文