需求描述：
原本的element中el-upload組件中的file-list中我們想去添加一個上傳后顯示上傳文件的大小的效果，如圖：
剛開始的思路是：這種思路也沒啥問題，對了，上傳按鈕的位置和觸發可以參考： 我這篇文章
后來一想，我們是不是可以找到element上傳這一塊的源碼進行修改，項目中引入修改后的上傳組件呢？
答案是可以的，下面看具體步驟：
第一步：首先進入element的github下載源代碼
第二步：找到upload文件夾
打開upload-list.vue文件：
就這么簡單，然后我們把這整個upload拷貝一份到我們自己的項目中
先不考慮全局組件的話，我們就把拷貝到自己項目中的這個upload文件夾就是自己的一個普通組件，index.vue就是入口，我們在我們的業務中，就下面的三部曲：
引入，注冊，使用
原來的el-upload 名字替換成Upload名即可，因為我們的upload文件夾本就是el-upload的功能，我們只不過修改了一些代碼。
我們在使用的時候使用的是我們修改后的el-upload，而不是走的nodemodules中原來的el-upload了。
最后：我們發現el-upload是注冊的全局組件（廢話，在上面的圖上看到了），我們業務中如果有好幾個組件中都要用修改過后的上傳組件顯示文件大小，我們這么三部曲引入很麻煩，
我們其再注冊為我們自己的全局組件：
1.把upload文件夾中的index.vue中的name改個名（否則還會走默認的element的upload）
在main.js中引入注冊並使用
這樣我們在業務組件中就直接不用像之前的三步曲一樣了，直接把原有的el-upload標簽名替換成了：tdm-upload即可：
就是如此簡單
總結：這個案例非常簡單，這里主要提供一個解決問題的方法和思路。
附加一個工具方法：
1.將字節轉換為不同的文件大小：
// 文件大小換算
// 參數a為要傳入的文件字節值，b為保留多少位小數，默認為2位
export const formatBytes = (a, b) => { if (a === 0 || !a) return '' const c = 1024 const d = b || 2 const e = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] const f = Math.floor(Math.log(a) / Math.log(c)) return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f] }