springboot整合vue2实现大文件分片上传、秒传、断点续传

connygpt 2024-12-18 14:55 5 浏览

实现说明

本篇文章主要介绍vue端的整合和技术知识点的分析，springboot后台代码及整合请参考上一篇文章：springboot整合vue2-uploader文件分片上传、秒传、断点续传

项目开源地址：https://gitee.com/msxy/qingfeng-vue

其他产品开源地址：https://gitee.com/msxy

安装uploader和spark-md5的依赖

npm install --save vue-simple-uploader
npm install --save spark-md5

mainjs导入uploader

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

创建uploader组件

<template>
  <div>
    <uploader
      :autoStart="false"
      :options="options"
      :file-status-text="statusText"
      class="uploader-example"
      @file-complete="fileComplete"
      @complete="complete"
      @file-success="fileSuccess"
      @files-added="filesAdded"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>将文件拖放到此处以上传</p>
        <uploader-btn>选择文件</uploader-btn>
        <uploader-btn :attrs="attrs">选择图片</uploader-btn>
        <uploader-btn :directory="true">选择文件夹</uploader-btn>
      </uploader-drop>
      <!-- <uploader-list></uploader-list> -->
      <uploader-files> </uploader-files>
    </uploader>
    <br />
    <a-button @click="allStart()" :disabled="disabled">全部开始</a-button>
    <a-button @click="allStop()" style="margin-left: 4px">全部暂停</a-button>
    <a-button @click="allRemove()" style="margin-left: 4px">全部移除</a-button>
  </div>
</template>

<script>
import axios from "axios";
import SparkMD5 from "spark-md5";
import storage from "store";
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  data() {
    return {
      skip: false,
      options: {
        target: "//localhost:8888/upload/chunk",
        // 开启服务端分片校验功能
        testChunks: true,
        parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, "年")
            .replace(/\days?/, "天")
            .replace(/\shours?/, "小时")
            .replace(/\sminutes?/, "分钟")
            .replace(/\sseconds?/, "秒");
        },
        // 服务器分片校验函数
        checkChunkUploadedByResponse: (chunk, message) => {
          const result = JSON.parse(message);
          if (result.data.skipUpload) {
            this.skip = true;
            return true;
          }
          return (result.data.uploaded || []).indexOf(chunk.offset + 1) >= 0;
        },
        headers: {
          // 在header中添加的验证，请根据实际业务来
          "Access-Token": storage.get(ACCESS_TOKEN),
        },
      },
      attrs: {
        accept: "image/*",
      },
      statusText: {
        success: "上传成功",
        error: "上传出错了",
        uploading: "上传中...",
        paused: "暂停中...",
        waiting: "等待中...",
        cmd5: "计算文件MD5中...",
      },
      fileList: [],
      disabled: true,
    };
  },
  watch: {
    fileList(o, n) {
      this.disabled = false;
    },
  },
  methods: {
    fileSuccess(rootFile, file, response, chunk) {
      // console.log(rootFile);
      // console.log(file);
      // console.log(message);
      // console.log(chunk);
      const result = JSON.parse(response);
      console.log(result.success, this.skip);

      if (result.success && !this.skip) {
        axios
          .post(
            "http://127.0.0.1:8888/upload/merge",
            {
              identifier: file.uniqueIdentifier,
              filename: file.name,
              totalChunks: chunk.offset,
            },
            {
              headers: { "Access-Token": storage.get(ACCESS_TOKEN) }
            }
          )
          .then((res) => {
            if (res.data.success) {
              console.log("上传成功");
            } else {
              console.log(res);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        console.log("上传成功，不需要合并");
      }
      if (this.skip) {
        this.skip = false;
      }
    },
    fileComplete(rootFile) {
      // 一个根文件（文件夹）成功上传完成。
      // console.log("fileComplete", rootFile);
      // console.log("一个根文件（文件夹）成功上传完成。");
    },
    complete() {
      // 上传完毕。
      // console.log("complete");
    },
    filesAdded(file, fileList, event) {
      // console.log(file);
      file.forEach((e) => {
        this.fileList.push(e);
        this.computeMD5(e);
      });
    },
    computeMD5(file) {
      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let currentChunk = 0;
      const chunkSize = 1024 * 1024;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();
      // 文件状态设为"计算MD5"
      file.cmd5 = true; //文件状态为“计算md5...”
      file.pause();
      loadNext();
      fileReader.onload = (e) => {
        spark.append(e.target.result);
        if (currentChunk < chunks) {
          currentChunk++;
          loadNext();
          // 实时展示MD5的计算进度
          console.log(
            `第${currentChunk}分片解析完成, 开始第${
              currentChunk + 1
            } / ${chunks}分片解析`
          );
        } else {
          let md5 = spark.end();
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
              file.size
            } 用时：${new Date().getTime() - time} ms`
          );
          spark.destroy(); //释放缓存
          file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
          file.cmd5 = false; //取消计算md5状态
          file.resume(); //开始上传
        }
      };
      fileReader.onerror = function () {
        this.error(`文件${file.name}读取出错，请检查该文件`);
        file.cancel();
      };
      function loadNext() {
        let start = currentChunk * chunkSize;
        let end =
          start + chunkSize >= file.size ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
      }
    },
    allStart() {
      console.log(this.fileList);
      this.fileList.map((e) => {
        if (e.paused) {
          e.resume();
        }
      });
    },
    allStop() {
      console.log(this.fileList);
      this.fileList.map((e) => {
        if (!e.paused) {
          e.pause();
        }
      });
    },
    allRemove() {
      this.fileList.map((e) => {
        e.cancel();
      });
      this.fileList = [];
    },
  },
};
</script>

<style>
.uploader-example {
  width: 100%;
  padding: 15px;
  margin: 0px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

Uploader组件使用

<template>
  <div>
    <a-button @click="uploadFile"> 资源上传 </a-button>
    <a-drawer
      title="资源上传"
      placement="right"
      width="640"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <upload></upload>
    </a-drawer>
  </div>
</template>

<script>
import Upload from "@/components/Upload/Index";
export default {
  name: "WelcomePage",
  data() {
    return {
      visible: true,
    };
  },
  components: {
    Upload,
  },
  methods: {
    uploadFile() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    }
  },
};
</script>

<style lang="less" scoped>
</style>

核心方法分析

<uploader
      :autoStart="false"
      :options="options"
      :file-status-text="statusText"
      class="uploader-example"
      @file-complete="fileComplete"
      @complete="complete"
      @file-success="fileSuccess"
      @files-added="filesAdded"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <p>将文件拖放到此处以上传</p>
        <uploader-btn>选择文件</uploader-btn>
        <uploader-btn :attrs="attrs">选择图片</uploader-btn>
        <uploader-btn :directory="true">选择文件夹</uploader-btn>
      </uploader-drop>
      <!-- <uploader-list></uploader-list> -->
      <uploader-files> </uploader-files>
    </uploader>
    <br />
    <a-button @click="allStart()" :disabled="disabled">全部开始</a-button>
    <a-button @click="allStop()" style="margin-left: 4px">全部暂停</a-button>
    <a-button @click="allRemove()" style="margin-left: 4px">全部移除</a-button>

options参数分析

参考 simple-uploader.js 配置。此外，你可以有如下配置项可选：

parseTimeRemaining(timeRemaining, parsedTimeRemaining) {Function}用于格式化你想要剩余时间，一般可以用来做多语言。参数：

timeRemaining{Number}, 剩余时间，秒为单位
parsedTimeRemaining{String}, 默认展示的剩余时间内容，你也可以这样做替换使用：

parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  return parsedTimeRemaining
    .replace(/\syears?/, '年')
    .replace(/\days?/, '天')
    .replace(/\shours?/, '小时')
    .replace(/\sminutes?/, '分钟')
    .replace(/\sseconds?/, '秒')
}

categoryMap {Object}

文件类型 map，默认：

{
  image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
  video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
  audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac'],
  document: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
}

autoStart {Boolean}默认 true, 是否选择文件后自动开始上传。

fileStatusText {Object}默认：

{
  success: 'success',
  error: 'error',
  uploading: 'uploading',
  paused: 'paused',
  waiting: 'waiting'
}

用于转换文件上传状态文本映射对象。

0.6.0 版本之后，fileStatusText 可以设置为一个函数，参数为 (status, response = null)，第一个 status 为状态，第二个为响应内容，默认 null，示例：

fileStatusText(status, response) {
  const statusTextMap = {
    uploading: 'uploading',
    paused: 'paused',
    waiting: 'waiting'
  }
  if (status === 'success' || status === 'error') {
    // 只有status为success或者error的时候可以使用 response

    // eg:
    // return response data ?
    return response.data
  } else {
    return statusTextMap[status]
  }
}

fileComplete方法

fileComplete(rootFile) {
  // 一个根文件（文件夹）成功上传完成。
  // console.log("fileComplete", rootFile);
  // console.log("一个根文件（文件夹）成功上传完成。");
},

complete方法

 complete() {
      // 上传完毕。
      // console.log("complete");
    },

fileSuccess方法

文件上传成功，进行合并。

fileSuccess(rootFile, file, response, chunk) {
      // console.log(rootFile);
      // console.log(file);
      // console.log(message);
      // console.log(chunk);
      const result = JSON.parse(response);
      console.log(result.success, this.skip);

      if (result.success && !this.skip) {
        axios
          .post(
            "http://127.0.0.1:8888/upload/merge",
            {
              identifier: file.uniqueIdentifier,
              filename: file.name,
              totalChunks: chunk.offset,
            },
            {
              headers: { "Access-Token": storage.get(ACCESS_TOKEN) }
            }
          )
          .then((res) => {
            if (res.data.success) {
              console.log("上传成功");
            } else {
              console.log(res);
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        console.log("上传成功，不需要合并");
      }
      if (this.skip) {
        this.skip = false;
      }
    },

filesAdded方法

文件选择完成，进行文件分片处理。

filesAdded(file, fileList, event) {
      // console.log(file);
      file.forEach((e) => {
        this.fileList.push(e);
        this.computeMD5(e);
      });
    },
    computeMD5(file) {
      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let currentChunk = 0;
      const chunkSize = 1024 * 1024;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();
      // 文件状态设为"计算MD5"
      file.cmd5 = true; //文件状态为“计算md5...”
      file.pause();
      loadNext();
      fileReader.onload = (e) => {
        spark.append(e.target.result);
        if (currentChunk < chunks) {
          currentChunk++;
          loadNext();
          // 实时展示MD5的计算进度
          console.log(
            `第${currentChunk}分片解析完成, 开始第${
              currentChunk + 1
            } / ${chunks}分片解析`
          );
        } else {
          let md5 = spark.end();
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
              file.size
            } 用时：${new Date().getTime() - time} ms`
          );
          spark.destroy(); //释放缓存
          file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
          file.cmd5 = false; //取消计算md5状态
          file.resume(); //开始上传
        }
      };
      fileReader.onerror = function () {
        this.error(`文件${file.name}读取出错，请检查该文件`);
        file.cancel();
      };
      function loadNext() {
        let start = currentChunk * chunkSize;
        let end =
          start + chunkSize >= file.size ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
      }
    },

allStart全部开始

 allStart() {
  console.log(this.fileList);
  this.fileList.map((e) => {
    if (e.paused) {
      e.resume();
    }
  });
},

allStop全部停止

    allStop() {
      console.log(this.fileList);
      this.fileList.map((e) => {
        if (!e.paused) {
          e.pause();
        }
      });
    },

allRemove全部移除

    allRemove() {
      this.fileList.map((e) => {
        e.cancel();
      });
      this.fileList = [];
    },

文件分片

vue-simple-uploader自动将文件进行分片，在options的chunkSize中可以设置每个分片的大小。

如图：对于大文件来说，会发送多个请求，在设置testChunks为true后（在插件中默认就是true），会发送与服务器进行分片校验的请求，下面的第一个get请求就是该请求；后面的每一个post请求都是上传分片的请求

看一下发送给服务端的参数，其中chunkNumber表示当前是第几个分片，totalChunks代表所有的分片数，这两个参数都是都是插件根据你设置的chunkSize来计算的。

需要注意的就是在最后文件上传成功的事件中，通过后台返回的字段，来判断是否要再给后台发送一个文件合并的请求。

MD5的计算过程

断点续传及秒传的基础是要计算文件的MD5，这是文件的唯一标识，然后服务器根据MD5进行判断，是进行秒传还是断点续传。

在file-added事件之后，就计算MD5，我们最终的目的是将计算出来的MD5加到参数里传给后台，然后继续文件上传的操作，详细的思路步骤是：

把uploader组件的autoStart设为false，即选择文件后不会自动开始上传
先通过 file.pause()暂停文件，然后通过H5的FileReader接口读取文件
将异步读取文件的结果进行MD5，这里我用的加密工具是spark-md5，你可以通过npm install spark-md5 --save来安装，也可以使用其他MD5加密工具。
file有个属性是uniqueIdentifier，代表文件唯一标示，我们把计算出来的MD5赋值给这个属性 file.uniqueIdentifier = md5，这就实现了我们最终的目的。
通过file.resume()开始/继续文件上传。

computeMD5(file) {
      let fileReader = new FileReader();
      let time = new Date().getTime();
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let currentChunk = 0;
      const chunkSize = 1024 * 1024;
      let chunks = Math.ceil(file.size / chunkSize);
      let spark = new SparkMD5.ArrayBuffer();
      // 文件状态设为"计算MD5"
      file.cmd5 = true; //文件状态为“计算md5...”
      file.pause();
      loadNext();
      fileReader.onload = (e) => {
        spark.append(e.target.result);
        if (currentChunk < chunks) {
          currentChunk++;
          loadNext();
          // 实时展示MD5的计算进度
          console.log(
            `第${currentChunk}分片解析完成, 开始第${
              currentChunk + 1
            } / ${chunks}分片解析`
          );
        } else {
          let md5 = spark.end();
          console.log(
            `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
              file.size
            } 用时：${new Date().getTime() - time} ms`
          );
          spark.destroy(); //释放缓存
          file.uniqueIdentifier = md5; //将文件md5赋值给文件唯一标识
          file.cmd5 = false; //取消计算md5状态
          file.resume(); //开始上传
        }
      };
      fileReader.onerror = function () {
        this.error(`文件${file.name}读取出错，请检查该文件`);
        file.cancel();
      };
      function loadNext() {
        let start = currentChunk * chunkSize;
        let end =
          start + chunkSize >= file.size ? file.size : start + chunkSize;
        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
      }
    },

给file的uniqueIdentifier 属性赋值后，请求中的identifier即是我们计算出来的MD5

秒传及断点续传

在计算完MD5后，我们就能谈断点续传及秒传的概念了。

服务器根据前端传过来的MD5去判断是否可以进行秒传或断点续传：

a. 服务器发现文件已经完全上传成功，则直接返回秒传的标识。
b. 服务器发现文件上传过分片信息，则返回这些分片信息，告诉前端继续上传，即断点续传。

在每次上传过程的最开始，vue-simple-uploader会发送一个get请求，来问服务器我哪些分片已经上传过了，这个请求返回的结果也有几种可能：

a. 如果是秒传，在请求结果中会有相应的标识，比如我这里是skipUpload为true，且返回了url，代表服务器告诉我们这个文件已经有了，我直接把url给你，你不用再传了，这就是秒传。
b. 如果后台返回了分片信息，这是断点续传。如图，返回的数据中有个uploaded的字段，代表这些分片是已经上传过的了，插件会自动跳过这些分片的上传。

图b1：断点续传情况下后台返回值

前端做分片检验：checkChunkUploadedByResponse

插件自己是不会判断哪个需要跳过的，在代码中由options中的checkChunkUploadedByResponse控制，它会根据 XHR 响应内容检测每个块是否上传成功了，成功的分片直接跳过上传
你要在这个函数中进行处理，可以跳过的情况下返回true即可。

checkChunkUploadedByResponse: function (chunk, message) {
	 let objMessage = JSON.parse(message);
     if (objMessage.skipUpload) {
         return true;
     }

     return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},

注：skipUpload 和 uploaded 是我和后台商议的字段，你要按照后台实际返回的字段名来。

优化MD5计算

原uploader中计算MD5的方式为对整个文件直接计算MD5，很吃内存，容易导致浏览器崩溃
我改成了通过分片读取文件的方式计算MD5，防止直接读取大文件时因内存占用过大导致的网页卡顿、崩溃。

自定义的状态

（之前我就封装了几种自定义状态，最近总有小伙伴问怎么没有“校验MD5”，“合并中”这些状态，我就把我的方法写出来了，方式很笨，但是能实现效果）

插件原本只支持了success、error、uploading、paused、waiting这几种状态，

由于业务需求，我额外增加了“校验MD5”、“合并中”、“转码中”、“上传失败”这几种自定义的状态

由于前几种状态是插件已经封装好的，我不能改源码，只能用比较hack的方式：
当自定义状态开始时，要手动调一下statusSet方法，生成一个p标签盖在原本的状态上面；当自定义状态结束时，还要手动调用statusRemove移除该标签。

this.statusSet(file.id, 'merging');
this.statusRemove(file.id);

vueuploader

上一篇：产品经理问前端:如何搭积木式的快速开发H5页面?
下一篇：百度上传插件WEB UPLOADER 百度上插件是什么

springboot整合vue2实现大文件分片上传、秒传、断点续传

实现说明

安装uploader和spark-md5的依赖

mainjs导入uploader

创建uploader组件

Uploader组件使用

核心方法分析

options参数分析

fileComplete方法

complete方法

fileSuccess方法

filesAdded方法

allStart全部开始

allStop全部停止

allRemove全部移除

文件分片

MD5的计算过程

秒传及断点续传

前端做分片检验：checkChunkUploadedByResponse

优化MD5计算

自定义的状态

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三