前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端如何分片上传文件?

前端如何分片上传文件?

作者头像
城市中的游牧民族
发布2020-09-24 10:13:15
1.4K0
发布2020-09-24 10:13:15
举报
文章被收录于专栏:前端真相前端真相

概述

分片上传好处:可以断点续传,针对较大文件传输有明显好处,以免中途传输中断还需从头开始,借助哈希算法计算每片文件的哈希值,最后计算单个文件的哈希值。

实现

基础知识:关键是哈希算法和HTML5的FileReader对象。哈希算法可以参考本人的另一篇文章:彻底掌握哈希算法,不再似懂非懂!

FileReader 可以参考MDN。

下面列出关键的计算文件哈希值的JavaScript代码,需要引入CryptoJS:

代码语言:javascript
复制
/**创建hash对象,md5已不再足够安全,具体使用SHA256或者SHA128视具体情况而定,
SHA256更安全但是计算量也更大**/
var fileHash = CryptoJS.algo.SHA128.create();

var fileReader = new FileReader();
var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice;//类似截取数组的方法,用来截取单个完整的文件

var  arrayBufferToWordArray = function (ab) {
            var i8a = new Uint8Array(ab);
            var a = [];
            for (let i = 0; i < i8a.length; i += 4) {
                a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
            }
            return CryptoJS.lib.WordArray.create(a, i8a.length);
        }

 fileReader.onload = function (e: any) {
 //每读取一次分片就更新一次哈希值
            fileHash.update(arrayBufferToWordArray(e.target.result));
            currentChunk++;
            if (currentChunk < chunks) {//判断是否读取完成
                let start = currentChunk * chunkSize;
                let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
                //分片读取文件
                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            } else {
            //文件分片读取完成,转换成字符串
                fileMD5 = fileHash.finalize().toString();             
            }
        };

参考链接:

https://my.oschina.net/u/4404738/blog/3412099

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-23 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档