el-upload修改回显的文件名称
时间: 2025-03-10 16:07:03 浏览: 100
### 修改 Element UI `el-upload` 组件中已上传文件显示的名字
为了更改已经上传成功的文件名,在使用 Vue 和 Element UI 的 `el-upload` 组件时,可以通过自定义文件列表项来实现这一需求。具体来说,可以利用 `on-change` 或者 `http-request` 配置选项来自定义请求逻辑,并通过设置响应数据中的文件名为期望值。
对于文件回显的情况,通常是在页面加载或者刷新之后再次展示之前成功上传过的文件信息。此时应该在接收到服务器端返回的数据后手动构建文件对象,并将其加入到 `file-list` 属性绑定的数组里去。在这个过程中可以直接指定文件对象内的 name 字段为想要显示的文字[^1]。
另外一种方式是覆盖默认的文件列表渲染行为,即不依赖于组件自带的文件列表样式而是完全自己控制其外观。这需要借助 scoped slot 功能,允许开发者更灵活地定制每一个文件条目的呈现形式。例如:
```html
<template>
<div>
<!-- 使用slot-scope来自定义文件列表 -->
<el-upload
:action="uploadUrl"
:before-upload="handleBeforeUpload"
:on-success="handleSuccess"
list-type="text"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<template #file="{file}">
<span v-if="customFileNameMap[file.uid]">{{ customFileNameMap[file.uid] }}</span>
<span v-else>{{ file.name }}</span>
</template>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'your/upload/api',
fileList: [],
customFileNameMap: {} // 存储自定义文件名映射关系的对象
};
},
methods: {
handleBeforeUpload(file) {
const uid = Date.now(); // 假设我们给每个新添加的文件分配唯一的uid作为key
this.customFileNameMap[uid] = '新的文件名字'; // 设置你想让这个文件显示出来的名称
Object.defineProperty(file, 'uid', { value: uid }); // 将此uid附加到当前处理的File实例上以便后续查找对应关系
return true;
},
handleSuccess(response, file){
console.log('response:', response);
console.log('file:', file);
if (response && response.code === 200) {
let tempFileObj = {...file};
tempFileObj.url = response.data.fileUrl || '';
tempFileObj.name = '服务端返回的新文件名';
// 更新本地存储的文件列表状态
this.fileList.push(tempFileObj);
}
}
}
}
</script>
```
上述代码片段展示了如何通过监听事件以及操作内部 state 来达到改变文件名的效果。当有新的文件被添加进来的时候(无论是初次上传还是从缓存恢复),都会经过 `handleBeforeUpload()` 方法,在这里可以根据业务逻辑设定好要显示的具体文字;而一旦某个文件完成了上传,则会在 `handleSuccess()` 中进一步调整该文件的相关属性,比如 URL 地址和最终决定使用的文件名[^2]。
阅读全文
相关推荐

















