16-对element源码进行修改实现上传列表增加上传文件大小显示

需求描述：

原本的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]
}