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
 }

总结

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

猜你喜欢

转载自blog.csdn.net/weixin_45701199/article/details/128936857