elemens 导入excel文件按钮
时间: 2023-07-07 07:40:23 浏览: 57
你可以借助 `el-upload` 组件来实现一个用于上传 Excel 文件的按钮,具体实现如下:
```html
<template>
<div>
<el-upload
class="upload-excel"
action=""
:show-file-list="false"
:on-change="handleFileUpload"
>
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
methods: {
handleFileUpload(file) {
const formData = new FormData()
formData.append('file', file.raw)
// 在这里可以对上传的文件进行操作
}
}
}
</script>
<style>
.upload-excel {
border: 1px dashed #ccc;
border-radius: 4px;
padding: 20px;
text-align: center;
cursor: pointer;
}
.upload-excel:hover {
border-color: #409EFF;
}
</style>
```
上述代码中,我们使用了 `el-upload` 组件来实现上传文件的功能。我们将 `class` 设置为 `upload-excel`,并设置了一些样式来让它看起来像一个按钮。在模板中,我们还添加了一个 `el-button` 组件,用于显示按钮的文本。在 `el-upload` 组件中,我们绑定了 `:show-file-list="false"`,表示不显示上传文件列表,绑定了 `:on-change="handleFileUpload"`,表示当用户选择文件后,会触发 `handleFileUpload` 方法。在 `handleFileUpload` 方法中,我们使用 `FormData` 对象来封装上传的文件数据,然后可以对这个文件进行操作。
如果需要更改上传文件的类型,可以在 `el-upload` 组件中添加 `:accept` 属性,例如:
```html
<el-upload
class="upload-excel"
action=""
:show-file-list="false"
:on-change="handleFileUpload"
:accept="'.xlsx,.xls'"
>
```
上述代码中,我们将 `:accept` 属性设置为 `'.xlsx,.xls'`,表示只允许上传 `.xlsx` 和 `.xls` 类型的文件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)