Vue+elelemtUI实现断点续传（前端）

一、在config->index.js中设置 proxy

devServer: {
        proxy: {
            '/': {
                target: 'http://127.0.0.1:8888',
                changeOrigin: true
            }
        }
    }

 

二、下载并引用相应依赖 （main.js）

　　本次demo是利用 Element-ui 配合开发。

　　所需依赖（我的版本）：

　　　　"element-ui": "^2.13.2",

　　　　"axios": "^0.19.2",

　　　　"spark-md5": "^3.0.1",

　　　　"qs": "^6.9.4",

　　 如果嫌一个一个下载麻烦，可以把上面内容复制到 package.json 中 “dependencies” ，执行  "npm install" 即可。

　　main.js引入所需包：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

　　App.vue中引入所需包：

　　

import { fileParse } from "./assets/utils";
import axios from "axios";
import SparkMD5 from "spark-md5";

 

三、HTML部分

　　使用Element-UI实现前端样式展示

<template>
  <div id="app">
    <el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
    </el-upload>

    <!-- PROGRESS -->
    <div class="progress">
      <span>上传进度：{{total|totalText}}%</span>
      <el-link type="primary" v-if="total>0 && total<100" @click="handleBtn">{{btn|btnText}}</el-link>
    </div>

    <!-- VIDEO -->
    <div class="uploadImg" v-if="video">
      <video :src="video" controls />
    </div>
  </div>
</template>

 

四、使用 promise 封装 fileParse方法

　　　　promise：promise构造函数是同步执行的，并且是立即执行的函数，promise.then中的函数是异步的。并且promise状态改变后将不会再更改。

　　　　Promise有三个状态：pending（等待）、fulfilled（实现）、rejected（拒绝），其中resolve和reject只有第一次执行有效。

　　utils.js（对文件转义形式进行封装，根据所传入参数确定封装格式【base64、buffer】）

export function fileParse(file, type = "base64") {
    return new Promise(resolve => {
        let fileRead = new FileReader();
        if (type === "base64") {
            fileRead.readAsDataURL(file);
        } else if (type === "buffer") {
            fileRead.readAsArrayBuffer(file);
        }
        fileRead.onload = (ev) => {
            resolve(ev.target.result);
        };
    });
};

 

 

 

 

五、逻辑流程（前端）

　　　

　　1、利用结合promise封装filepase方法，解析文件为buffer数据

　　2、使用sparkMD5生成文件的哈希值，并获取后缀；使用spark.append(buffer)生成哈希值

　　3、通过正则获取文件后缀

　　4、创建切面默认参数，包括：切片个数、索引值和结束值

　　5、通过flie.slice（）进行切片

　　6、进行遍历上传切片，判断当前索引  >=  切片数组后停止，调用合并文件接口告知服务器进行合并

　　

六、项目整体代码

<script>
import { fileParse } from "./assets/utils";
import axios from "axios";
import SparkMD5 from "spark-md5";

export default {
  name: "App",
  data() {
    return {
      total: 0,
      video: null,
      btn: false,
    };
  },
  filters: {
    btnText(btn) {
      return btn ? "继续" : "暂停";
    },
    totalText(total) {
      return total > 100 ? 100 : total;
    },
  },
  methods: {
    async changeFile(file) {
      if (!file) return;
      file = file.raw;

      // 解析为BUFFER数据
      // 我们会把文件切片处理：把一个文件分割成为好几个部分（固定数量/固定大小）
      // 每一个切片有自己的部分数据和自己的名字
      // HASH_1.mp4
      // HASH_2.mp4
      // ...
      let buffer = await fileParse(file, "buffer"),
        spark = new SparkMD5.ArrayBuffer(),
        hash,
        suffix;
      spark.append(buffer);
      hash = spark.end();
      suffix = /\.([0-9a-zA-Z]+)$/i.exec(file.name)[1];

      // 创建100个切片
      let partList = [],
        partsize = file.size / 100,
        cur = 0;
      for (let i = 0; i < 100; i++) {
        let item = {
          chunk: file.slice(cur, cur + partsize),
          filename: `${hash}_${i}.${suffix}`,
        };
        cur += partsize;
        partList.push(item);
      }

      this.partList = partList;
      this.hash = hash;
      this.sendRequest();
    },
    async sendRequest() {
      // 根据100个切片创造100个请求（集合）
      let requestList = [];
      this.partList.forEach((item, index) => {
        // 每一个函数都是发送一个切片的请求
        let fn = () => {
          let formData = new FormData();
          formData.append("chunk", item.chunk);
          formData.append("filename", item.filename);
          return axios
            .post("/single3", formData, {
              headers: { "Content-Type": "multipart/form-data" },
            })
            .then((result) => {
              result = result.data;
              if (result.code == 0) {
                this.total += 1;
                // 传完的切片我们把它移除掉
                this.partList.splice(index, 1);
              }
            });
        };
        requestList.push(fn);
      });

      // 传递：并行(ajax.abort())/串行(基于标志控制不发送)
      let i = 0;
      let complete = async () => {
        let result = await axios.get("/merge", {
          params: {
            hash: this.hash,
          },
        });
        result = result.data;
        if (result.code == 0) {
          this.video = result.path;
        }
      };
      let send = async () => {
        // 已经中断则不再上传
        if (this.abort) return;
        if (i >= requestList.length) {
          // 都传完了
          complete();
          return;
        }
        await requestList[i]();
        i++;
        send();
      };
      send();
    },
    handleBtn() {
      if (this.btn) {
        //断点续传
        this.abort = false;
        this.btn = false;
        this.sendRequest();
        return;
      }
      //暂停上传
      this.btn = true;
      this.abort = true;
    },
  },
};
</script>

 

　　参考资料：https://www.bilibili.com/video/BV18v411v7Xu?t=346