element plus上传文件
时间: 2023-11-12 11:09:36 浏览: 92
element-plus-2.2.20.zip
Element Plus提供了一个名为upload的组件,可以用于上传文件。该组件有默认的上传文件方式,并且是数组类型。以下是使用Element Plus上传文件的步骤:
1. 在Vue组件中引入Element Plus的upload组件。
2. 在template中使用upload组件,并设置ref属性为一个自定义的名称,例如"uploadRef"。
3. 在script中使用$refs获取upload组件的引用,例如this.$refs.uploadRef。
4. 在methods中定义一个名为handleUpload的方法,该方法将在上传文件时被调用。在该方法中,可以通过this.$refs.uploadRef获取上传文件的相关信息,例如上传的文件列表。
代码示例:
```html
<template>
<el-upload
ref="uploadRef"
action="/upload"
:on-success="handleUpload"
:file-list="fileList"
multiple>
<el-button>点击上传</el-button>
</el-upload>
</template>
<script>
import { ElUpload, ElButton } from 'element-plus';
export default {
components: {
ElUpload,
ElButton,
},
data() {
return {
fileList: [],
};
},
methods: {
handleUpload() {
const files = this.$refs.uploadRef.uploadFiles;
console.log(files);
},
},
};
</script>
```
阅读全文