el-upload :data 获取上传文件的文件名
时间: 2023-07-28 21:11:55 浏览: 261
使用 el-upload 组件上传文件时,可以通过监听上传成功的事件,在回调函数中获取上传文件的相关信息,包括文件名。具体方法如下:
1. 在 el-upload 组件上添加 ref 属性,用于获取组件实例:
```html
<el-upload ref="upload" ...></el-upload>
```
2. 监听上传成功的事件,获取上传文件的相关信息:
```javascript
this.$refs.upload.$on('success', (response, file, fileList) => {
console.log('上传文件名:', file.name);
});
```
其中,file 对象就是上传的文件,可以通过其 name 属性获取文件名。
相关问题
el-upload :data 传入文件名
el-upload 是 Element UI 提供的文件上传组件,可以通过 data 属性向后端传递额外的数据。如果需要在上传时传入文件名,可以在 data 中添加一个名为 filename 的属性,其值为要设置的文件名。例如:
```html
<el-upload
action="/upload"
:data="{ filename: 'example.jpg' }"
>
<!-- 组件内容 -->
</el-upload>
```
这样在上传时就会将文件名设置为 example.jpg。当然,具体的实现方式还需要根据后端接口的要求来确定。
<el-upload> 获取选择文件的文件名
<-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` 方法遍历列表,得到所有选择文件的文件名。