当我们上传文件的时候,文件内容不会根据文件名修改而改变,不同文件类型都可以用进制工具查看(十六进制编辑器UltraEdit),对应的文件内容也是固定的。那些文件续传或者秒传的功能就是根据文件内容生成唯一的hash,上传之前让后台判断是否传递过,或者传递了哪些,再根据状态续传或者秒传。
今天分享的是spark-md5这个包,可以根据内容获取唯一的hash。
安装:
npm install --save-dev spark-md5
有两种hash,一个是hex hash十六进制,一个是raw hash(不知道翻译成什么):
import SparkMD5 from 'spark-md5'
var hexHash = SparkMD5.hash('Hi there'); // hex hash
var rawHash = SparkMD5.hash('Hi there', true); // OR raw hash (binary string)
console.log(hexHash); //d9385462d3deff78c352ebb3f941ce12
console.log(rawHash); //Ù8TbÓÞÿxÃRë³ùAÎ
还有另外一种用法,但是raw hash获得的结果不一样:
var spark = new SparkMD5();
spark.append('Hi');
spark.append(' there');
var hexHash = spark.end(); // hex hash
var rawHash = spark.end(true); // OR raw hash (binary string)
console.log(hexHash);//d9385462d3deff78c352ebb3f941ce12
console.log(rawHash);//ÔŒÙ
所以用十六进制的hash应该是更好一些,这边试了一下文件的hash:
<input type="file" @change="getFile">
getFile(file){
let fileReader = new FileReader();
fileReader.onload = function (e) {
let hexHash = SparkMD5.hash(e.target.result);
console.log(hexHash);
};
fileReader.readAsDataURL(file.target.files[0]);
}
这边要用FileReader把文件内容变成文本或者base64或者ArrayBuffer,官方文档提供的就是文本和ArrayBuffer,而FileReader就有这几个API,FileReader可以把Blob转成其他格式的数据,主要是三个方法readAsText(转化成文本)、readAsArrayBuffer把Blob转成ArrayBuffer、readAsDataURL把Blob转成Base64。
测试了一下,改了文件名输出的hash还是一样,内容修改了,加个空格输出的hash也会改变。
当我们要做断点续传的时候,就把文件用Blob.prototype.slice把文件切片,然后把每个切片的文件获取到hash,再加上数组index,组成一个一个的文件名,跟流一起传给后台。文章来源:https://www.toymoban.com/news/detail-505657.html
欢迎关注个人订阅号 coding个人笔记文章来源地址https://www.toymoban.com/news/detail-505657.html
到了这里,关于spark-md5根据文件内容生成hash的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!