前端切片文件，js实现上传大文件（切片上传）相当稳定 实战,支持批量上传支持 。

1. vue+element 组件。

   <template>
     <div>
       <el-upload
         class="upload-demo"
         multiple
         action="api"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         :file-list="fileList"
         :http-request="httpRequest"
         list-type="picture-card"
       >
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">
         提示信息
         </div>
       </el-upload>
     </div>
   </template>
   

2. vue代码

   <script>
   //引入自己的js 文件 如果报错参考 最下方jscofig.json配置
   import * as myFileUtils from "./../../../static/myjs/bwFileUtil.js";
   export default {
     name: "Home",
     data() {
       return {
         api:"/api/v1/wyiwfileUpload",
         fileList: [],
       };
     },
     methods: {
       handleRemove(file, fileList) {
         console.info("files is " + JSON.stringify(file));
         console.info("fileList is " + JSON.stringify(fileList));
       },
       handlePreview(file) {
         console.log(file);
       },
       httpRequest(option) {
       //获取文件对象
         var file = option.file
         console.info("files is " + JSON.stringify(file));
         console.info("filesName is " + JSON.stringify(file.name));
         var fileName = "_"+file.name;
         //保证文件唯一性 后端作为合并文件的条件
         var timestamp = new Date().getTime();
         //调用自己封装的文件上传 js 方法
          myFileUtils.fileUpload(file, timestamp, 0, timestamp+fileName, this.api)
       },
     },
     created: function init(params) {},
   };
   </script>
   

3. js 文件上传 源代码static/myjs/bwFileUtil.js。

   
   function filesUpload(files, api) {
       for (let index = 0; index < files.length; index++) {
           const file = files[index];
           console.info("file size is :" + file.size)
           var timestamp = new Date().getTime();
           var fileName = "_"+file.name;
           fileUpload(file, timestamp, 0, timestamp+fileName, api)
       }
   }
   
   function fileUpload(file, timestamp, i, fileName, api) {
       console.info("file  fileName is : " + fileName)
       var name = file.name,                           //文件名
           size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
           shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
           shardCount = Math.ceil(size / shardSize);  //总片数
       if (i > shardCount) {
           return;
       }
       //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
       var start = i * shardSize;
       var end = start + shardSize;
       var packet = file.slice(start, end);  //将文件进行切片
       /*  构建form表单进行提交  */
       var form = new FormData();
       form.append("fileId", timestamp)
       form.append("data", packet); //slice方法用于切出文件的一部分
       form.append("name", name);
       form.append("totalSize", size);
       form.append("fileName",fileName)
       if (shardCount === i + 1) {
           shardSize = size - i * shardSize
       }
       form.append("shardSize", shardSize);
       form.append("total", shardCount); //总片数
       form.append("index", i+1); //当前是第几片
       $.ajax({
           header: {
               //可以换成自己接口服务鉴权的token
               token: "cpBvqWrr0UK9zPJoKj+412alxxcY6qFwrSVoO0juZg0S1jX/sGfMd9oi3AsSxW+MdWFrwtGCykUTmMqrqpbCElmT75DfB87lENC7lCuMxgF0d5wQB6yAubUVyGOzhbrScvIfD8ZSjOJ3D88AOy2xRd4oG8TxeGoMoZqnqIwjKg="
           },
           url: api,
           type: "POST",
           data: form,
           //timeout:"10000",  //可以设置超时时间
           async: true, //异步
           dataType: "json",
           processData: false, //很重要，告诉jquery不要对form进行处理
           contentType: false, //很重要，指定为false才能形成正确的Content-Type
           success: function (msg) {
               console.log(msg);
               /*  表示上一块文件上传成功，继续下一次  */
               if (msg.data.status == 201) {
                   form = '';
                   i++;
                   // PostFile(file, i);
                   fileUpload(file, timestamp, i, fileName, api)
               } else if (msg.data.status == 502) {
                   form = '';
                   /*  失败后，每2秒继续传一次分片文件  */
                   // fileUpload(file, timestamp, i, index, api)
                   console.error("服务器error "+msg)
               } else if (msg.data.status == 200) {
                   console.log("上传成功");
               } else if (msg.data.status == 500) {
                   console.log('第' + msg.i + '次，上传文件有误！');
               } else {
                   console.log('未知错误');
               }
           }
       })
   }
   
   export {
       filesUpload,fileUpload
   }
   

4. 效果
   

5. jsconfig.json配置（如果自己引入自己的js文件可以使用请忽略）

   {
     "include": [
       "./src/**/*",
       //配置自己存放的js目录
       "static/myjs"
     ],
   }