Browser.js OSS大文件分片上传

HTML:

//上传提示
<div id="upload-progress">
   <div>
      正在上传源文件，请等待，不要关闭当前网页
   </div>
   <div>
      正在上传第<span id="is-upload-number">1</span>个，
      进度<span id="is-upload-progress"></span>，
      共<span id="total-upload-number"></span>个文件
   </div>
</div>

//上传表单
<div class="show_div show_upload">
<div class="myuploadshow layui-form">
//上传按钮
<span id="submit"></span> 
//文件列表
<div id="info">
<div class="myuploadlist">
<a class="dellist" οnclick="info_detail_delete(this)">删除</a>
<div class="lb">
<span><i class="tip_i">* </i>源文件：</span>
<div class="upload_lb">
<i class="layui-icon layui-icon-addition"></i>
<input id="source_file_0" type="text" placeholder="点击或拖拽上传，文件不超过5GB，支持zip、rar、7z" readonly>
</div>
<span id="source_file_upload_filename_0" style="width: auto; display: none;color: black;margin-right: 10px;"></span>
<span id="source_file_upload_loading_0" style="width: auto; display: none; color: red;">等待上传</span>
<span id="source_file_size_0" style="display: none; color: grey;"></span>
<i id="source_file_delete_0" class="layui-icon layui-icon-delete" style="color: red; margin-left: 15px; display: none;" οnclick="deleteSourceFile(0)"></i>
<input type="hidden" name="source_file_oss_url[0]">
<input type="hidden" name="source_file[0]">
<input type="hidden" name="size[0]">
</div>
</div>
</div>
</div>
</div>

<div class="state">
   <a class="submit" lay-submit lay-filter="formDemo">提交</a>
</div>

JS
//初始化
var indexNow = 0;
//提交
res：请求后台获取file.size的数据
//上传
form.on('submit(formDemo)', function (data) {
        indexArr = res.data;
        var indexArrLength = indexArr.length;//上传文件数量
        $('#total-upload-number').text(indexArrLength);//赋值展示上传文件共几个
        $('#is-upload-number').text(1);//赋值展示当前是第1个文件
        valueNow = indexArr[indexNow];
        //获取文件名称
        var fileName = $('input[name="source_file['+valueNow+']"]').val()
        initFileName(fileName);
});

//初始化容器
var client;
var headers;
var name;
var options;

//主方法
function initFileName(fileName) {
       client = new OSS({
           // yourRegion填写Bucket所在地域。
           //以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
           region: "oss-cn-shanghai",
           // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
           accessKeyId: accessKeyId,
           accessKeySecret: accessKeySecret,
           // 从STS服务获取的安全令牌（SecurityToken）。
           stsToken: stsToken,
           // 填写Bucket名称，例如examplebucket。
           bucket: bucket,
           //注意（阿里云SDK没有说该如何设置）
           secure: true,
           timeout: 120000
       });

       headers = {
           // 指定该Object被下载时的网页缓存行为。
           "Cache-Control": "no-cache",
           // 指定该Object被下载时的名称。
           "Content-Disposition": fileName,
           // 指定该Object被下载时的内容编码格式。
           "Content-Encoding": "utf-8",
           // 指定过期时间，单位为毫秒。
           Expires: "1000",
           // 指定Object的存储类型。
           "x-oss-storage-class": "Standard",
           // 指定Object标签，可同时设置多个标签。
           "x-oss-tagging": "Tag1=1&Tag2=2",
           // 指定初始化分片上传时是否覆盖同名Object。
           //此处设置为true，表示禁止覆盖同名Object。
           "x-oss-forbid-overwrite": "true",
       };

       // 指定上传到examplebucket的Object名称，例如exampleobject.txt，设置随机文件名
       var suffix = fileName.substring(fileName.lastIndexOf(".")+1);
       var date = new Date();
       var pathName = date.getFullYear().toString() + (date.getMonth()+1).toString() + date.getDate().toString() + '/' + date.getHours().toString() + date.getMinutes().toString() + date.getSeconds().toString() + date.getMilliseconds().toString();
       //加密
       var md5FileName = hex_md5(fileName);
       //合成文件名   
       name = "根地址"+pathName+md5FileName+'.'+suffix;


       // 获取DOM。
       // const submit = document.getElementById("submit");
       options = {
           // 获取分片上传进度、断点和返回值。
           progress: (p, cpt, res) => {
               //实时返回上传进度（百分比实时渲染，is-upload-progress容器ID名）
               // console.log(p);
               var progress = p*100;
               $('#is-upload-progress').text(progress+'%')
           },
           // 设置并发上传的分片数量。
           parallel: 4,
           // 设置分片大小。默认值为1 MB，最小值为100 KB。
           partSize: 1024 * 1024 * 10,//10MB
           // headers,
           // 自定义元数据，通过HeadObject接口可以获取Object的元数据。
           meta: {year: 2020, people: "test"},
           mime: "text/plain",
       };
   }


   // 监听按钮。
   var submit = document.getElementById("submit");
   submit.addEventListener("click", async () => {
       try {
           //上传提示（source_file_delete，source_file_upload_loading 容器ID名）   
           // fileName = $('input[name="source_file['+valueNow+']"]').val()
           $('#source_file_delete_'+valueNow).hide();
           $('#source_file_upload_loading_'+valueNow).text('正在上传...');

           // const data = document.getElementById("file").files[0];
           const data = $('#source_file_'+valueNow).next()[0].files[0];
           // 分片上传。
           const res = await client.multipartUpload(name, data, {
               ...options,
               // 设置上传回调。
               // 如果不涉及回调服务器，请删除callback相关设置。
               /*callback: {
                  // 设置回调请求的服务器地址。
                  url: "http://examplebucket.aliyuncs.com:23450",
                  // 设置回调请求消息头中Host的值，即您的服务器配置Host的值。
                  host: "yourHost",
                   /!* eslint no-template-curly-in-string: [0] *!/
                   // 设置发起回调时请求body的值。
                   body: "bucket=${bucket}&object=${object}&var1=${x:var1}",
                   // 设置发起回调请求的Content-Type。
                   contentType: "application/x-www-form-urlencoded",
                   customValue: {
                   // 设置发起回调请求的自定义参数。
                       var1: "value1",
                       var2: "value2",
                  },
                },*/
           });
    
           //分片上传
           if (res.res.status == 200) {
               //第一个上传完成后执行下一个上传（提示）
               $('#source_file_upload_loading_'+valueNow).text('上传完成');
               //给文件地址字段赋值
               formDataField['source_file_oss_url['+valueNow+']'] = 'https://browserjs.oss-cn-shanghai.aliyuncs.com/'+res.name;
               if (indexNow < indexArr.length-1){
                   indexNow ++;
                   valueNow = indexArr[indexNow];
                   $('#is-upload-number').text(indexNow+1);//当前上传的是第几个
                   //修改文件名称
                   var fileName = $('input[name="source_file['+valueNow+']"]').val();
                   initFileName(fileName);
                   //模拟点击事件，开始上传
                   $('#submit').click();
               }else{
                   //上传完毕，提交表单
                   var loading = layer.load(0, {time: 10 * 1000});
                   $.ajax({
                       type: "post",
                       url: '上传地址',
                       data: formDataField,
                       dataType: "json",
                       success: function (res) {
                           layer.close(loading);
                           if (res.code == 0) {
                               layer.msg(res.msg, function () {
                                   layer.closeAll();
                               });
                           } else {
                               layer.msg(res.msg);
                           }
                       }
                   });
               }
           }
       } catch (err) {
           console.log(err);
       }
   });