react+antd(upload)上传视频使用md5判断视频是否上传完整

前言

年前后台管理系统写了一个关于视频上传的需求，使用的是阿里的oss上传，限制大小也限制了500M。但昨天后端同学找了过来说能不能传给md5给他来判断是否上传完整，因为app端要用到这个视频，如果后台上传大文件的时候，没有上传完整，那么可能会出现问题。
于是我就百度了一下md5，MD5全称Message Digest Algorithm 5，即消息摘要算法第5版。

MD5特性：

1，长度固定：MD5加密后值固定长度是128位，使用32个16进制数字进行表示。
2，单向性/不可逆/恒定性：同一个文件在不同时间通过md5解析出来的消息摘要是一样的。但是这个消息摘要并不能逆向解析原始数据出来。
3，不可预测性：两个原始数据相差一个字母，解析出来就完全不一样。
特殊的：MD5是32位的，理论上是有限的，而世界上的数据是无限的，不同的文件可能也会生成重复的MD5值
经典例子：

# 数据源1：
d131dd02c5e6eec4693d9a0698aff95c2fcab58712467eab4004583eb8fb7f89
55ad340609f4b30283e488832571415a085125e8f7cdc99fd91dbdf280373c5b
d8823e3156348f5bae6dacd436c919c6dd53e2b487da03fd02396306d248cda0
e99f33420f577ee8ce54b67080a80d1ec69821bcb6a8839396f9652b6ff72a70
# 数据源2：
d131dd02c5e6eec4693d9a0698aff95c2fcab50712467eab4004583eb8fb7f89
55ad340609f4b30283e4888325f1415a085125e8f7cdc99fd91dbd7280373c5b
d8823e3156348f5bae6dacd436c919c6dd53e23487da03fd02396306d248cda0
e99f33420f577ee8ce54b67080280d1ec69821bcb6a8839396f965ab6ff72a70
# 有着相同的MD5值
79054025255fb1a26e4bc422aef54eb4

为什么要用md5

因为每个文件都会有自己专属独立的md5值，就像是每个人的身份证，比如我们在某个平台发布视频，将视频文件二次上传的时候就会遇到不容易过审的原因，同一个MD5就有很大的机率显示搬运被退回。刚好后端同学也可以通过MD5这种特性来判断上传的文件是否完整。

实现文件md5的计算

出现问题了，项目里原来用了 js-md5,这个md5来加密登陆密码的，然后用这个对视频文件加密，和后端md5计算出来的结果不一致。
看了一下js-md5：

js-md5准确来说不算是加密，应该说是将密文序列化了，可以通过下列的网站将md5加密后的字符直接解析出来，因此安全性很低，也不符合刚刚介绍的MD5特性

解密网站点击

所以，换成crypto-js来进行解析：

通过自定义的密钥进行加解密，可以更灵活的加解密密文，但是因为密文的key在可以通过前端看到，所以加密的信息虽然通过解密网站无法解密，但是可以通过在前端得到的公共key进行解密，不过用在自己的业务逻辑里问题不大

代码如下：
业务代码：获取md5的方法

 const getMD5 = (value) => {
        let reader = new FileReader();
        // 读取文件 value
        reader.readAsArrayBuffer(value);
        return new Promise((resolve, reject) => {
            try {
                reader.onload = function () {
                  var wordArray = CryptoJS.lib.WordArray.create(reader.result);
                  var hash = CryptoJS.MD5(wordArray).toString(); // 计算其他加密算法，SHA1改为MD5、SHA256即可
                    resolve(hash)
                };
            } catch (error) {
                reject(error)
            }
        })
    }

在upload组件beforeUpload这个API中实现

const beforeUpload = async (file) => {
        // 计算图片或视频的md5
        const MD5 =  await getSha1(file)
        // 讲md5这个计算的值赋值给file对象文件，后续传给后端同学
        file.md5 = MD5
        return file
 }

总结

有点不想写，但是考虑到在写的时候能沉浸在知识的海洋，也能更加理解。还有就是以后自己还能看。好记性不如烂笔头。各位同学也多做笔记，一起学习哦