一、背景
最近做的一个功能有单个图片上传和多个图片上传的功能，这边是按照原来的代码分了两个组件来做。完成后，收到测试反馈，说单个图片上传组件有问题，图片显示是裂开的，但实际是上传成功了。我心想不对呀，我做功能的时候自测挺正常的，于是要了这张图来，结果发现还真不行， 同一张图片，单张图片上传的组件显示图裂开，多张图片上传的组件是正常显示……
本以为是单张图片上传组件存在什么小bug，于是一一查验，发现并无不妥，而且用我自己的图片也是能正常显示的……另外我发现，这张图片通过多张图片上传组件上传时，虽然可以正常显示，但是如果将表单保存后再进行编辑，进入该界面时，无论是单张图片上传组件，还是多张图片上传组件，该图片都是裂开状态。
后来抱着试一试的想法，我把这张图片的文件名改了一下（原文件名非常长），结果居然显示正常了！
二、问题
-
element-ui的upload组件在上传的文件名太长的情况下预览图会裂开
三、原因
- 有待考证
四、解决方法
- 采取截断图片文件名的方式来解决该问题，代码如下：
<el-upload
......, // 其它属性
:before-upload="beforeUpload"
>
<i class="el-icon-plus" />
</el-upload>
beforeUpload(file) {
const fileName = this.truncateFileName(file.name)
file.uid = file.uid || (Date.now() + '') // 确保唯一性
file = new File([file], fileName, { type: file.type }) // 创建一个新的文件对象，替换原有文件对象
// 其它操作
......
},
// 截断文件名
truncateFileName(fileName) {
const maxLength = 50 // 设定最大长度
if (fileName.length > maxLength) {
const fileExtension = fileName.slice(fileName.lastIndexOf('.'))
const newFileName = fileName.slice(0, maxLength) + fileExtension
return newFileName
}
return fileName
}
//
