js多文件切片上传 (vue项目)

问题背景

项目在移动端因为图片过大，需要进行切片上传处理。（仅涉及前端逻辑）

判断是否断网

/* 主要解决缓存了当前页面之后 用户断网再上传图片出现的逻辑错误*/
if ( navigator.onLine ) {
   
   //正常工作
} else {
   
  //执行离线状态时的任务
}

单文件上传模拟进度条

    animatePress(obj) {
   
      let randNum = this.getRandomNum(80, 95);
      var setIntVal = setInterval(() => {
   
        if (obj.press < randNum) {
   
          if (obj.press < 20) {
   
            obj.press++;
          } else {
   
            obj.press += 3;
          }
        }
        if (obj.press == 100) {
   
          clearInterval(setIntVal);
        }
      }, 100);
    },

单文件 获得一个 x- y 之间的随机数

getRandomNum(min, max) {
   
      let range = max - min;
      let rand = Math.random();
      return min + Math.round(rand * range);
    },

图片上传转base64

https://blog.csdn.net/lhjllff12345/article/details/72842384

$("#img_upload_file").change(function() {
   
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);//调用自带方法进行转换
        reader.onload = function(e) {
   
            $("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览
            $("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用
        }; 
    });

怎么获取文件数据

// capture 相机属性  multiple 多选文件 
<input type="file" accept="image/*" capture="camera" multiple="multiple" id="take-photo" @change="takePhoto">
<input type="file"