首先引入JS文件:
<script src="https://cdn.jsdelivr.net/npm/spark-md5@3.0.0/spark-md5.min.js"></script>
测试代码:
<script>
!function () {
var xhr = new XMLHttpRequest();
// 也可以使用POST方式,根据接口,测试的图片是百度搜索首页的logo(2019-11-28 17:35)
xhr.open('GET', 'http://127.0.0.1:8080/bd_logo1.png', true);
xhr.responseType = "blob"; // 返回类型blob
xhr.onload = function () {
if (this.status === 200) {
// 获得二进制
var blob = this.response;
var reader = new FileReader();
reader.onload = function (e) {
var spark = new SparkMD5.ArrayBuffer()
spark.append(e.target.result)
console.log("md5:",spark.end())
}
//转换成FileReader对象
reader.readAsArrayBuffer(blob);
}
}
xhr.send();
}();
</script>
控制台输出:
windows输出:
通过这种方式获取的文件MD5是真正的MD5!那种经过canvas转来转去生成的MD5早已经不是原来的MD5了。
当然也可以通过这种方式获得本地文件的md5,具体可参考:https://www.cnblogs.com/jianqingwang/p/6999356.html,当我们看完这篇文章即可把file转成FileReader然后再转换成md5。
注意:通过网络下载(ajax)的文件必须和自己在一个域下否则会报跨域错误(通过设置Access-Control-Allow-Origin可以解决),具体可看控制台