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