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

最新推荐文章于 2024-08-14 15:51:24 发布

孙小笔

最新推荐文章于 2024-08-14 15:51:24 发布

阅读量4.5k

点赞数

分类专栏：原创文章标签： js

本文链接：https://blog.csdn.net/qq_15238979/article/details/88779838

版权

本文介绍了在移动端项目中，由于图片过大而需要进行切片上传的前端处理方法。主要内容包括判断网络状态、模拟单文件上传进度条、生成随机数、图片转base64、获取文件数据、判断文件类型和大小、本地预览以及如何切割图片。并提供了多个相关教程链接作为参考。

摘要由CSDN通过智能技术生成

问题背景

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

判断是否断网

/* 主要解决缓存了当前页面之后 用户断网再上传图片出现的逻辑错误*/
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"