<think>根据用户的问题，用户在使用
Element UI的
el-upload组件
上传文件后遇到了
文件名不
显示的问题。用户希望得到解决方案。
从用户提供的引用
内容来看，引用[1]和引用[2]都提到了在`handleChange`方法中通过创建新的File对象来修改
文件名，并替换掉原始
文件的`raw`属性。同时，为了确保组件内部不报错，还手动添加了`
uid`属性。
用户的问题可能是由于在修改
文件名后，组件的
显示逻辑没有更新导致的。但根据引用中的代码，他们通过替换`file
.raw`并手动触发
上传（`this
.$refs
.upload.submit()`）来解决问题。
然而，用户现在遇到的是
上传后
文件名不
显示的问题。这可能是因为在修改
文件后，组件的
文件列表没有正确更新。因此，我们需要确保在修改
文件后，组件能够正确地
显示新的
文件名。
解决方案可以包括：
1
. 确保在`handleChange`方法中修改
文件后，更新组件的
文件列表。但是注意，
el-upload组件在
文件变化时会自动更新
文件列表，所以可能不需要手动更新。
2
. 检查是否在模板中正确绑定了
文件列表，并
显示文件名。
根据
Element UI的文档，
el-upload组件会通过`file
-list`属性来绑定
文件列表，并且可以通过`scoped slot`来自定义
显示。如果用户没有正确使用插槽来
显示文件名，可能会导致不
显示。
因此，我们可以从以下两个方面考虑：
- 检查是否在模板中使用了`file
-list`属性，并且是否在插槽中正确
显示了
文件名。
- 在修改
文件名后，确保
文件列表中的
文件对象已经更新。
另外，引用[2]中还提到，
文件名中如果包含特殊符号可能会导致
上传报错，因此他们通过正则表达式去除了特殊符号。但用户的问题是不
显示，所以可能不是特殊符号的问题，但这也可能是导致不
显示的一个原因（比如
文件名含有非法字符导致
显示异常）。
下面，我们将提供一个可能的解决方案，包括如何修改
文件名并确保正确
显示。
### 解决方案
#### 1
. 修改
文件名并更新
文件列表
在`handleChange`方法中，我们按照引用的方式创建一个新的File对象，并替换`file
.raw`。但是，需要注意的是，
el-upload组件的
文件列表是内部维护的，我们修改`file
.raw`后，组件应该会自动更新。如果仍然不
显示，我们可以尝试强制更新组件。
另外，我们可以通过使用`file
-list`属性绑定一个数组，然后手动更新这个数组来确保
文件名
显示。
#### 2
. 在模板中正确
显示文件名
在
el-upload组件中，默认情况下，它会
显示文件名。但是，如果用户使用了自定义模板（插槽），则需要确保在插槽中
显示文件名。
#### 示例代码
下面是一个示例，展示如何修改
文件名并确保
显示：
```
vue
<template>
<div>
<
el-upload
ref="
upload"
action="https://
jsonplaceholder
.typicode
.com/posts/"
:auto
-upload="false"
:on
-change="handleChange"
:file
-list="fil
eList" <!
-- 绑定fil
eList数组
-->
>
<
el-button slot="trigger" size="small" type="primary">选取
文件</
el-button>
<div slot="tip" class="
el-upload__tip">只能
上传jpg/png
文件，且不超过500kb</div>
</
el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fil
eList: [] // 初始化
文件列表
};
},
methods: {
handleChange(file, fil
eList) {
// 修改
文件名，例如添加后缀
let fileName = file
.name + &#
39;
.suffix&#
39;;
// 去除特殊字符（可选）
// fileName = fileName
.replace(/[^\w\
.-]/g, &#
39;&#
39;);
// 创建新的File对象
let newFile = new File([file
.raw], fileName, { type: file
.raw
.type });
// 手动设置
uid，防止组件内部报错
newFile
.uid = file
.uid;
// 由于fil
eList是只读的，我们需要创建一个新的数组来更新
// 找到当前修改的
文件在列表中的位置
const index = fil
eList
.findIndex(f => f
.uid === file
.uid);
if (index !==
-1) {
// 创建一个新的
文件对象，用于替换原
文件对象
const newFileObj = {
...fil
eList[index],
name: fileName, // 更新
文件名
raw: newFile // 更新raw
};
// 更新整个
文件列表
const updatedFil
eList = [
...fil
eList];
updatedFil
eList
.splice(index, 1, newFileObj);
this
.fil
eList = updatedFil
eList; // 更新绑定的fil
eList
}
// 如果需要自动
上传，可以调用submit
// this
.$refs
.upload.submit();
}
}
};
</script>
```
在上面的代码中：
- 我们使用`file
-list`属性绑定了一个数组`fil
eList`，这样我们可以控制
文件列表的
显示。
- 在`handleChange`方法中，我们修改
文件名，并创建新的File对象。
- 然后，我们更新
文件列表中对应
文件的`name`和`raw`属性，并重新设置整个
文件列表（因为
Vue的响应式要求，我们需要创建一个新的数组）。
这样，
文件名应该会正确
显示。
#### 注意事项
- 如果不需要立即
上传，可以注释掉`this
.$refs
.upload.submit()`，这样
文件会在用户点击
上传按钮时再
上传。
- 去除特殊符号的正则表达式可以根据需要添加。
### 相关问题
1
. 如何限制
el-upload上传文件的类型和大小？
2
. el-upload组件如何实现拖拽
上传？
3. 在
el-upload中如何实现多
文件上传并控制并发？</think>###
Element UI
el-upload 上传文件后
文件名不
显示问题解决方案
在使用
Element UI 的 `
el-upload` 组件时，
文件名不
显示通常是由于
文件对象的 `name` 属性未正确设置或组件渲染机制导致的。以下是具体原因和解决方案：
#### 原因分析
1
. **
文件对象未正确更新**：修改
文件名后未更新 `file
.raw` 对象的 `name` 属性
2
. **
UID 冲突**：新建 `File` 对象时丢失了原
文件的 `
uid` 属性
3. **特殊字符问题**：
文件名包含特殊符号导致渲染异常
4
. **响应式更新失败**：
Vue 无法检测到
文件对象的深层属性变化
#### 解决方案
通过修改 `handleChange` 方法，创建新
文件对象并保留必要属性：
```
vue
<template>
<
el-upload
ref="
upload"
action="/api/
upload"
:auto
-upload="false"
:on
-change="handleChange"
:file
-list="fil
eList">
<!
-- 上传区域
-->
</
el-upload>
</template>
<script>
export default {
data() {
return {
fil
eList: [] // 绑定
文件列表
}
},
methods: {
handleChange(file, fil
eList) {
// 1
. 清理特殊字符（可选）
const cleanName = file
.name
.replace(/[^\w\
.-]/g, &#
39;&#
39;);
// 2
. 创建新
文件对象（保留原类型）
const newFile = new File(
[file
.raw],
`${cleanName}${this
.extendName}`,
{ type: file
.raw
.type }
);
//
3. 保留关键属性
newFile
.uid = file
.uid; // 必须保留
UID
// 4
. 更新
文件列表
const updatedList = fil
eList
.map(item =>
item
.uid === file
.uid ? {
...item, raw: newFile, name: newFile
.name } : item
);
// 5
. 触发视图更新
this
.fil
eList = updatedList;
// 6
. 手动触发
上传（可选）
this
.$nextTick(() => {
this
.$refs
.upload.submit();
});
}
}
}
</script>
```
#### 关键修改说明
1
. **
文件清理**（可选）
```
javascript
const cleanName = file
.name
.replace(/[^\w\
.-]/g, &#
39;&#
39;); // 移除非法字符[^2]
```
2
. **正确创建 File 对象**
```
javascript
new File([file
.raw], newName, { type: file
.raw
.type }) // 保留原始MIME类型
```
3. **保留
UID**
```
javascript
newFile
.uid = file
.uid; // 防止组件内部报错[^1]
```
4
. **响应式更新**
```
javascript
this
.fil
eList = updatedList; // 强制触发视图更新
```
#### 注意事项
1
. 使用 `:file
-list="fil
eList"` 绑定响应式数据
2
. 修改后通过 `this
.$nextTick()` 确保 DOM 更新完成
3. 特殊字符处理可根据实际需求调整正则表达式
4
. 如果不需要即时
上传，可移除 `submit()` 调用
> 此方案避免了使用 FormData 的复杂性，直接通过修改
文件对象实现[^1]。通过保留
UID 和正确更新
文件列表，确保组件能正常渲染
文件名。
---
### 相关问题
1
. **如何限制
el-upload 上传文件的类型和大小？**
[提示：使用 `accept` 属性和 `before
-upload` 钩子]
2
. **
el-upload 如何实现拖拽
上传和多
文件选择？**
[提示：`drag` 属性和 `multiple` 属性配置]
3. **
上传过程中如何
显示进度条和取消
上传？**
[提示：`on
-progress` 事件和 `abort()` 方法的使用]
4
. **如何自定义
el-upload 的
文件列表展示样式？**
[提示：使用 `scoped slot` 自定义模板]
5
. **服务器返回错误时如何优雅处理
上传失败？**
[提示：`on
-error` 钩子和错误提示集成]
[^1]: 通过创建新 File 对象修改
文件名而不使用 FormData
[^2]:
文件名特殊字符处理可避免
上传报错
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1692
