<el-upload> 获取选择文件的文件名
时间: 2023-07-19 09:19:05 浏览: 107
elemetUi 组件–el-upload实现上传Excel文件的实例
5星 · 资源好评率100%
<-upload> 组件提供了 `before-upload` 和 `file-list-change` 两个事件,这两个事件都可以用来获取选择文件的文件名。具体实现可以参考以下代码示例:
```
<template>
<div>
<el-upload
ref="upload"
:before-upload="beforeUpload"
:on-change="handleChange"
:auto-upload="false"
>
<el-button slot="trigger">选择文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
beforeUpload(file) {
// 获取选择文件的文件名
console.log(file.name);
return true;
},
handleChange(file, fileList) {
// 获取选择文件的文件名
this.fileList = fileList;
const selectNames = fileList.map(file => file.name);
console.log(selectNames);
}
}
};
</script>
```
在上面的示例中,我们分别在 `beforeUpload` 和 `handleChange` 方法中获取选择文件的文件名。在 `beforeUpload` 方法中,我们可以直接访问 `file` 参数获取当前选择的文件对象,从而获取文件名。在 `handleChange` 方法中,我们通过 `fileList` 参数获取已选择文件的列表,然后通过 `map` 方法遍历列表,得到所有选择文件的文件名。
阅读全文