elementui 多文件上传
时间: 2023-07-28 10:08:28 浏览: 135
多文件上传
Element UI 提供了一个名为 `el-upload` 的组件,可以用于实现多文件上传功能。以下是一个简单的示例代码:
```html
<template>
<div>
<el-upload
action="/upload"
:multiple="true"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
// 处理上传成功的逻辑
console.log(response);
}
}
}
</script>
```
在上面的代码中,`el-upload` 组件的 `action` 属性指定了上传文件的接口地址,`:multiple="true"` 属性表示可以同时选择多个文件进行上传。`handleUploadSuccess` 方法会在上传成功后被调用,你可以在这个方法中处理上传成功的逻辑,比如显示上传成功的提示信息或更新文件列表等。
需要注意的是,你需要根据自己的实际情况修改上传接口的地址,以及在服务器端处理上传文件的逻辑。另外,你也可以通过设置其他属性来自定义上传行为,比如限制文件类型、大小等。详细的文档可以参考 Element UI 官方文档中关于 `el-upload` 组件的说明。
阅读全文