解决element-ui的upload组件在上传的文件名太长的情

一、背景

最近做的一个功能有单个图片上传和多个图片上传的功能，这边是按照原来的代码分了两个组件来做。完成后，收到测试反馈，说单个图片上传组件有问题，图片显示是裂开的，但实际是上传成功了。我心想不对呀，我做功能的时候自测挺正常的，于是要了这张图来，结果发现还真不行， 同一张图片，单张图片上传的组件显示图裂开，多张图片上传的组件是正常显示……
本以为是单张图片上传组件存在什么小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
}

//