七牛QEtag AWS S3分片文件哈希算法实现,前端最好用的文件哈希工具

274 阅读2分钟

实现七牛ETag 算法 AWS s3 Etag 算法,仅4.07 kB,支持批量

带执行进度progress 可以批量/分别监听哈希进度

允许自定义分片大小,文件自动分片,支持分片单独读取哈希值(MD5SHA1)

举个例子: 大文件需要分配上传,本地进行一定大小分片并计算出 哈希值,用哈希值去服务器请求上传直传签名网址,签名出来的哈希可以作为校验值,七牛的比较友好,AWS的签名在不同的平台使用的分片大小会不一样:它是根据你分片上传大小来计算(比如10M文件 你3M+3M+3M+1M 和 5M+5M)哈希校验时候就不一样了;

  • 喂给 youloge.etag({file:file})它吐回来.then(file) 已经分片完成且每个分片哈希都包括chunk是分片文件,并发的上传到云存储即可,后端可以用哈希作为文件名以及秒传功能。

CDN 引入使用方式 10.82 kB │ gzip: 4.07 kB

  • https://unpkg.com/youloge.etag

  • https://cdn.jsdelivr.net/npm/youloge.etag

  • 直接包安装 npm i youloge.etag

直接使用 Github 主页

youloge.etag({
  file:file, // 必选 传入文件
  size:1024*1024*5, // 可选参数 用于自定义分片大小(MD5)
  progress:(res)=>{ // 可选参数 监听执行进度
    res = {type: 'tag', step: 1, total: 1}
    res = {type: 'key', step: 1, total: 1}
  }
}).then(file=>{
  console.log(file) // 执行完成 哈希等参数挂载再file对象上
}).catch(err=>{ })
  • progress key 七牛Eatg计算执行进度
  • progress tag S3 Etag计算执行进度,自定义size是自定义该部分

异步返回

File 对象
{
  // QEtag 块信息
  "keys": [
      {
          "chunk": {}, // QEtag 分片 固定4MB
          "words": {}  // QEtag 分片哈希 .toString() 即可转为字符串
      },
  ],
  // MD5 Etag 块信息
  "tags": [
      {
          "chunk": {}, // 默认分片大小 5MB 可自定义
          "words": {}  // MD5 .toString() 即可转为字符串
      },
  ],
  "key": "lkNwJK-VGN5T5UienEnVEAhYCQxR", // QEtag 计算结果
  "tag": "19273b26242f42fad1ff8ca26790fcb8-3", // AWS Etag 计算结果
  // 标准File对象属性
  "lastModified":1710797382891,
  "lastModifiedDate":Tue Mar 19 2024 05:29:42 GMT+0800 (中国标准时间),
  "name":"test.txt",
  "size":14025894,
  "type":"text/plain",
  "webkitRelativePath":""
}
  • 参数 key推荐作为自定义文件名,与后端通信做文件秒传功能
  • 参数 tag 文件MD5 配合size配置 做任意文件大小切片,适合大文件分片上传,后缀****-3指分片个数

HTML 示例

document.querySelector('#file').onchange = (e)=>{
  let files = e.target.files
  Array.from(files).forEach(file=>{
    youloge.etag({
      file:file
    }).then(item=>{
      console.log(item)
    })
  })
}

但行好事 莫问前程

Youloge.Qrcode 纯二维码生成库 Gzip 5Kb