🗒️文件上传hash值计算(二)
00 分钟
2022-8-14
2023-10-31
type
status
date
slug
summary
tags
category
icon
password
 

📝 文件上传hash值计算(二)

前景

说到大文件上传,那必不可少的就是上传文件时计算文件的hash值了,那么我们为什么要计算文件的hash值呢?其实文件的hash值就相当于文件的DNA或者身份证一样,通常我们在上传文件时都会去校验一下服务器是否存在和我们相同的文件时,我们就会用到文件的hash值来比较是否上传重复的文件,像要实现文件妙传、切片等功能计算文件hash也是必不可少的,下面我就列举我们在前端文件上传计算hash的常用的两个方法:window.requestIdleCallback()抽样hash

requestIdleCallback()

React 中的Fiber 就是基于这个api去实现的,我们都知道javaScript是单线程的,如果有一些比较大型的计算任务等放在主线程去执行的话,就会造成主线程阻塞,然后导致浏览器渲染的时候卡顿(浏览器渲染网页时都是一帧一帧绘制出来的,如果在一帧中浏览器的任务很快不到16ms(一帧大概16.5ms)就完成任务的话,那么这一帧就会有空闲的时间),而requestIdleCallback()这个函数将在浏览器空闲时期被调用。这使我们能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。

文件切片

上传文件时,首先对文件进行切片,特别是对于大文件可以提高文件的传输效率的

计算文件hash值(方式一)

这里会用到spark-md5这个库,主要做文件的增量计算,然后我们将得到的切片作为参数,spark.end()最后会返回一串字符串,这就是我们计算出来的hash

计算文件hash值(文件抽样hash)

web_woker

它的作用就是给JS创造多线程运行环境,允许主线程创建worker线程,分配任务给后者,主线程运行的同时worker线程也在运行,相互不干扰,在worker线程运行结束后把结果返回给主线程。这样做的好处是主线程可以把计算密集型或高延迟的任务交给worker线程执行,这样主线程就会变得轻松,不会被阻塞或拖慢。这并不意味着JS语言本身支持了多线程能力,而是浏览器作为宿主环境提供了JS一个多线程运行的环境。不建议使用,太麻烦也有一些限制(同源限制、文件限制等。。。),不能作为模块的方式去引入,只能是通过外部文件引入,具体,大家百度查一下就知道了,这里不多赘述
 
上一篇
React Hooks 实现自定义表单
下一篇
前端实现文件拖拽+上传+进度条