大文件上传

Software攻城狮

已于 2023-08-15 17:06:40 修改

阅读量307

点赞数

文章标签： javascript 前端开发语言

于 2023-05-12 08:36:51 首次发布

本文链接：https://blog.csdn.net/weixin_43799793/article/details/130634424

版权

大文件上传

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">   
    <!-- <script src="js/axios.js"> </script> -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.4.1.js">
    </script>
    <style>
        .Bars {
            position: relative;
            width: 200px;
            border: 1px solid #B1D632;
            padding: 1px;
        }

        .Bars div {
            display: block;
            position: relative;
            background: #B1D632;
            color: #333333;
            height: 20px;
            line-height: 20px
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>大上传文件</h3>
        <input id="file" type="file" name="avatar" />
        <div>
            <input id="submitBtn" type="button” value="提交">
        </div> 
        <div class="Bars">
            <div style="width: 0%;">
                <span>0%</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>


</html>

// 大文件上传思路：
/*
1.将大文件进行分割成多个小文件，
2.依次上传小文件，
3最后通知后端上传成功，（可以由后端计算总文件的大小，也可以单独用一个接口去通知文件发送成功）
4.上传的进度展示（根据需求来）

*/

var BigFileUpload = {
  chunkSize: 2 * 1024 * 1024, //分片大小
  fileSlice: File.prototype.slice, //对文件进行分割
  init() {
    $("#submitBtn").on("click", () => {
      var files = document.getElementById("#file").files;
      var files = files[0]; //获取文件
      console.log(files);
      if (!files) return; //没有上传文件结束
      //分片总数
      var count = Math.ceil(file.size / this.chunkSize);
      //时间戳
      var timestamp = new Date().getTime() + "";
      //缓存请求
      var axiosArray = [];
      for (var i = 0; i < count; i++) {
        var start = i * this.chunkSize;
        var end = Math.min(file.size, start + this.chunkSize); //Math.min(1,2,4)
        //构建表单
        var fd = new FormData();
        fd.append("file", this.fileSlice.call(file, start, end)); //切割的一部分文件
        fd.append("name", file.name); //文件名称
        fd.append("name", file.name); //文件名称
        fd.append("total", count); //分片数
        fd.append("size", file.size); //文件大小
        fd.append("index", i); //当前索引
        fd.append("hash", timestamp); //时间戳
        //发送请求，缓存请求，大文件上传
        axiosArray.push(
          axios.post("http://139.196.42.209:8002/file/upload", fd)
        );
      }
      //axios.all
      //   axios.all(axiosArray).then((d) => {
      //     var data = {
      //       size: file.size,
      //       name: file.name,
      //       total: count,
      //       hash: timestamp,
      //     };
      //     //合并文件分片上传，告诉后端前端已经全部都上传成功的提示请求
      //     axios
      //       .post("http://139.196.42.299:8002/file/merge_chunks", data)
      //       .then((res) => {
      //         if (res.msg == "success") {
      //           console.log("上传成功");
      //         }
      //       });
      //   });

      //异步同步化处理   async await
      async function run(arr) {
        for (var i = 0; i < arr.length; i++) {
          await arr[i];
          // 进度条显示
          var n = (i / arr.length) * 100 + "%";
          $(".Bars div").width(n);
          $(".Bars span").text(n);
        }
        axios.all(axiosArray).then((d) => {
          var data = {
            size: file.size,
            name: file.name,
            total: count,
            hash: timestamp,
          };
          //合并文件分片上传，告诉后端前端已经全部都上传成功的提示请求
          axios
            .post("http://139.196.42.299:8002/file/merge_chunks", data)
            .then((res) => {
              if (res.data.msg == "success") {
                console.log("上传成功");
                $(".Bars div").width(100);
                $(".Bars span").text(100);
              }
            });
        });

        run(axiosArray);
      }
    });
  },
};

window.onload = function () {
  BigFileUpload.init();
};