首页 > 其他分享 >大文件切片上传

大文件切片上传

时间:2023-05-29 11:56:41浏览次数:29  
标签:function 文件 const 切片 result file chunks return 上传

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切片上传</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
<input type="file">

<script>
    const inp = document.querySelector('input');
    inp.onchange = async (ev) => {
        const file = inp.files[0];
        if (!file) {
            return;
        }
        const chunks = createChunks(file, 10 * 1024 * 1024);
        const result = await hash(chunks);
        console.log(result);
        console.log(chunks);
    }

    function hash(chunks) {
        return new Promise(resolve => {
            const spark = new SparkMD5();

            function _read(i) {
                if (i >= chunks.length) {
                    resolve(spark.end());
                    return; // 读取完成
                }
                const blob = chunks[i];
                const reader = new FileReader();
                reader.onload = ev => {
                    const bytes = ev.target.result; // 读取到的字节数组
                    spark.append(bytes);
                    _read(i + 1)
                }
                reader.readAsArrayBuffer(blob);
            }

            _read(0);
        })

    }

    function createChunks(file, chunkSize) {
        const result = [];
        for (let i = 0; i < file.size; i += chunkSize) {
            result.push(file.slice(i, i + chunkSize))
        }
        return result;
    }
</script>
</body>
</html>

  

标签:function,文件,const,切片,result,file,chunks,return,上传
From: https://www.cnblogs.com/Blogzlj/p/17440037.html

相关文章

  • C++头文件理解
    看了下公司内部对于头文件的使用,感觉挺乱的。对于头文件容易搞混淆的点在于:涉及多文件,多次包含的时候容易搞错比如上面CPP就有三四个文件,每一个CPP都要按照先包含config,后包含common的顺序,在编译的时候指明。但是include头文件本质上就是:在编译时把指定的文件,包含到调用的地方......
  • yaml文件中&、<<、 * 含义
    yaml文件中&、<<、*含义development:&defaultadapter:postgresqldatabase:dev_developmenttest:&test<<:*defaultdatabase:test_testcucumber:<<:*testproduction:<<:*defaultdatabase:test_production重复......
  • idea新文件怎么自动生成用户名
    在创建java类后,自动生成定制的注释:设置过程点击File->Settings->Editor->FileandCodeTemplates在FileHeader中输入想要设置的信息如:/**文件名:${NAME}*创建者:yourname*创建时间:${DATE}${TIME}*描述:这是一个示例*/当然也可以参考下方的Description选择......
  • Python压缩JS文件,重点是 slimit
    摘要:PythonWeb程序员必看系列,学习如何压缩JS代码。本文分享自华为云社区《Python压缩JS文件,PythonWeb程序员必看系列,重点是slimit》,作者:梦想橡皮擦。本篇博客将学习压缩JS代码,首先要学习的模块是jsmin。jsmin库Python中的jsmin库来压缩JavaScript文件。这个库......
  • uniapp安卓选择文件
    引用import{pickFile}from'@/js/common/pickFile.js'使用pickFile.PickFile(function(audioSrc){console.log(audioSrc)_this.audioSrc='file://'+audioSrc;//_this.audioSrc='https://img-cdn-qiniu.dcloud.net.cn/......
  • 七牛云上传,网关超时502 Bad Gateway
    本地可以正常上传七牛云,服务器上网站正常访问,七牛云无法上传,报错502 BadGateway原因:域名解析节点出错。域名解析节点出现问题可能会导致网络请求无法正常访问到对应的服务器,因而会影响上传七牛云图片这类网络操作。例如,如果您的浏览器无法将域名正确解析为IP地址,那么就无法......
  • 发布-优化图片和js文件的存放路径
    把JavaScript文件同意生成到js目录中在webpack.config.js配置文件的output节点中,进行如下的配置:{test:/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'}......
  • 静态配置文件的问题
    静态配置文件的问题在业务量比较小的单体应用中,静态文本配置文件使用是没有大的问题。但是随着业务逐渐发展壮大,对大单体拆分为多个应用,就会产生一些问题:配置文件分散,修改起来比较麻烦配置生效不及时,修改后需要重启应用以使配置生效多环境配置,无法区分多个配置环境,比如开发的......
  • 常见项目——C语言实现2048小游戏(附源码和可执行文件)
    1.实现效果展示1.1界面图片说明:进入下面各页面后均可通过按键“q”来退出。1)菜单页2)开始游戏页3)游戏规则页4)按键说明页5)退出游戏页1.2视频展现戳此处查看视频演示1.3游戏源码及可执行文件(exe)下载支持作者,请关注公众号“优秀物联人”回复“2048小游戏”获取下......
  • Python 使用ConfigParser操作ini配置文件
    ini配置文件格式如下要求:ini文件必须是GBK编码,如果是UTF-8编码,python读取配置文件会报错。#这里是注释内容#[FY12361]#妇幼保健接口服务端口serverIP=192.168.1.11serverPort=8400[SM]#国产SM加密服务端口serverIP=192.168.1.11serverPort=8500说明:1.注释内容......