文件上传有两套方案

  1. 基于文件流（form-data）
    1. elementui默认是基于文件流的
    2. 上传格式：multipart/form-data
    3. 数据格式：form-data：file文件流信息，filename文件名
  2. 客户端需要把文件转为为base64，再上传
    1. 解析文件FileReader，转为base64

断点续传，切片续传

  1. <template>
  2.   <div id="app">
  3.     <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
  4.       <i class="el-icon-upload"></i>
  5.       <div class="el-upload__text">
  6.         将文件拖到此处，或
  7.         <em>点击上传</em>
  8.       </div>
  9.     </el-upload>
  11.     <!-- PROGRESS -->
  12.     <div class="progress">
  13.       <span>上传进度：{{ total | totalText }}%</span>
  14.       <el-link type="primary" v-if="total > 0 && total < 100" @click="handleBtn">{{ btn | btnText }}</el-link>
  15.     </div>
  17.     <!-- VIDEO -->
  18.     <div class="uploadImg" v-if="video">
  19.       <video :src="video" controls />
  20.     </div>
  21.   </div>
  22. </template>
  24. <script>
  25.   import axios from "axios";
  26.   // 可以通过文件流信息生成对应的hash，文件内容不变生成的hash不变
  27.   import SparkMD5 from "spark-md5";
  28.   // 将文件转为的buffer流格式
  29.   function fileParse(file, type = "base64") {
  30.     return new Promise(resolve => {
  31.       let fileRead = new FileReader();
  32.       if (type === "base64") {
  33.         fileRead.readAsDataURL(file);
  34.       } else if (type === "buffer") {
  35.         fileRead.readAsArrayBuffer(file);
  36.       }
  37.       fileRead.onload = (ev) => {
  38.         resolve(ev.target.result);
  39.       };
  40.     });
  41.   };
  42.   export default {
  43.     name: "App",
  44.     data() {
  45.       return {
  46.         total: 0,
  47.         video: null,
  48.         btn: false,
  49.       };
  50.     },
  51.     filters: {
  52.       btnText(btn) {
  53.         return btn ? "继续" : "暂停";
  54.       },
  55.       totalText(total) {
  56.         return total > 100 ? 100 : total;
  57.       },
  58.     },
  59.     methods: {
  60.       async changeFile(file) {
  61.         if (!file) return;
  62.         file = file.raw;
  64.         // 解析为BUFFER数据
  65.         // 我们会把文件切片处理：把一个文件分割成为好几个部分（固定数量/固定大小）
  66.         // 每一个切片有自己的部分数据和自己的名字
  67.         // HASH_1.mp4
  68.         // HASH_2.mp4
  69.         // ...
  70.         let buffer = await fileParse(file, "buffer"),
  71.             spark = new SparkMD5.ArrayBuffer(),
  72.             hash,
  73.             suffix;
  74.         spark.append(buffer);
  75.         hash = spark.end();
  76.         suffix = /\.([0-9a-zA-Z]+)$/i.exec(file.name)[1];
  78.         // 创建100个切片
  79.         let partList = [],
  80.             partsize = ~~(file.size / 99),
  81.             firstsize = file.size % 99,
  82.             cur = firstsize;
  83.         partList.push({
  84.           chunk: file.slice(0, cur),
  85.           filename: `${hash}_0.${suffix}`,
  86.         })
  87.         for (let i = 1; i < 100; i++) {
  88.           let item = {
  89.             chunk: file.slice(cur, cur + partsize),
  90.             filename: `${hash}_${i}.${suffix}`,
  91.           };
  92.           cur += partsize;
  93.           partList.push(item);
  94.         }
  95.         console.log(file.size, partsize, file, partList)
  97.         this.partList = partList;
  98.         this.hash = hash;
  99.         // 发送请求
  100.         this.sendRequest();
  101.       },
  102.       async sendRequest() {
  103.         // 根据100个切片创造100个请求（集合）
  104.         let requestList = [];
  105.         this.partList.forEach((item, index) => {
  106.           // 每一个函数都是发送一个切片的请求
  107.           let fn = () => {
  108.             let formData = new FormData();
  109.             formData.append("chunk", item.chunk);
  110.             formData.append("filename", item.filename);
  111.             return axios
  112.               .post("/single3", formData, {
  113.               headers: { "Content-Type": "multipart/form-data" },
  114.             })
  115.               .then((result) => {
  116.               result = result.data;
  117.               if (result.code == 0) {
  118.                 this.total += 1;
  119.                 // 传完的切片我们把它移除掉
  120.                 this.partList.splice(index, 1);
  121.               }
  122.             });
  123.           };
  124.           requestList.push(fn);
  125.         });
  127.         // 传递：并行(ajax.abort())/串行(基于标志控制不发送)
  128.         let i = 0;
  129.         // 完成上传后
  130.         let complete = async () => {
  131.           let result = await axios.get("/merge", {
  132.             params: {
  133.               hash: this.hash,
  134.             },
  135.           });
  136.           result = result.data;
  137.           if (result.code == 0) {
  138.             this.video = result.path;
  139.           }
  140.         };
  141.         let send = async () => {
  142.           // 已经中断则不再上传
  143.           if (this.abort) return;
  144.           if (i >= requestList.length) {
  145.             // 都传完了
  146.             complete();
  147.             return;
  148.           }
  149.           await requestList[i]();
  150.           i++;
  151.           send();
  152.         };
  153.         send();
  154.       },
  155.       handleBtn() {
  156.         if (this.btn) {
  157.           //断点续传
  158.           this.abort = false;
  159.           this.btn = false;
  160.           this.sendRequest();
  161.           return;
  162.         }
  163.         //暂停上传
  164.         this.btn = true;
  165.         this.abort = true;
  166.       },
  167.     },
  168.   };
  169. </script>