一泪姨、背景
最近做的一個功能有單個圖片上傳和多個圖片上傳的功能，這邊是按照原來的代碼分了兩個組件來做削祈。完成后翅溺，收到測試反饋，說單個圖片上傳組件有問題髓抑，圖片顯示是裂開的咙崎，但實際是上傳成功了。我心想不對呀启昧，我做功能的時候自測挺正常的叙凡，于是要了這張圖來，結(jié)果發(fā)現(xiàn)還真不行密末， 同一張圖片握爷，單張圖片上傳的組件顯示圖裂開，多張圖片上傳的組件是正常顯示……
本以為是單張圖片上傳組件存在什么小bug严里，于是一一查驗新啼，發(fā)現(xiàn)并無不妥，而且用我自己的圖片也是能正常顯示的……另外我發(fā)現(xiàn)刹碾，這張圖片通過多張圖片上傳組件上傳時燥撞，雖然可以正常顯示，但是如果將表單保存后再進(jìn)行編輯，進(jìn)入該界面時物舒，無論是單張圖片上傳組件色洞，還是多張圖片上傳組件，該圖片都是裂開狀態(tài)冠胯。
后來抱著試一試的想法火诸，我把這張圖片的文件名改了一下（原文件名非常長），結(jié)果居然顯示正常了荠察！
二置蜀、問題
-
element-ui的upload組件在上傳的文件名太長的情況下預(yù)覽圖會裂開
三、原因
- 有待考證
四悉盆、解決方法
- 采取截斷圖片文件名的方式來解決該問題盯荤，代碼如下：
<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 }) // 創(chuàng)建一個新的文件對象，替換原有文件對象
// 其它操作
......
},
// 截斷文件名
truncateFileName(fileName) {
const maxLength = 50 // 設(shè)定最大長度
if (fileName.length > maxLength) {
const fileExtension = fileName.slice(fileName.lastIndexOf('.'))
const newFileName = fileName.slice(0, maxLength) + fileExtension
return newFileName
}
return fileName
}
//
