vue3 + springboot 简单的切片上传

前端

使用插件有 element-puls前端ui，spark-md5 md5 加密插件，axios 请求插件

npm install element-plus axios spark-md5 @element-plus/icons-vue

main.ts

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(store)
app.use(router)
app.mount('#app')

fileUpload.vue

<template>
  <div class="home">
    <el-upload
      action="#"
      multiple
      :auto-upload="false"
      :show-file-list="true"
      :on-change="handleChange"
      drag
    >
      <!-- 这个图标的书写方式，element-plus和element有区别，注意一下！ -->
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>

    <!-- 进度显示 -->
    <span v-if="waitSpark == 1">正在切片--------</span>
    <span v-if="waitSpark == 2">上传进度：{
   {
    percent.toFixed() }}%</span>

    <!-- 进度显示 -->
    <el-button
      v-if="waitSpark != 0"
      type="primary"
      size="small"
      @click="handleClickBtn"
      >{
   {
    upload ? "暂停" : "继续" }}</el-button
    >
  </div>
</template>

<script lang="ts">
import {
    Options, Vue } from "vue-class-component";
import axios from "axios";
import SparkMD5 from "spark-md5";
import {
    UploadFilled } from "@element-plus/icons-vue";

@Options({
   
  data() {
   
    return {
   
      percent: 0,
      percentCount: 0,
      videoUrl: "",
      file: null,
      chunkList: null,
      hash: null,
      upload: true,
      waitSpark: 0,
    };
  },
  components: {
    UploadFilled },
  methods: {
   
    async handleChange(file) {
   
      if (!file) return;

      this.waitSpark = 1;

      this.percent = 0;
      this.percentCount = 0;
      this.videoUrl = "";
      // 获取文件并转成 ArrayBuffer 对象
      const fileObj = file.raw;
      this.file = fileObj.name;
      let buffer;
      try {
   
        buffer = await this.fileToBuffer(fileObj);
      } catch (e) {
   
        console.log(e);
      }
      // 将文件按固定大小（2M）进行切片，注意此处同时声明了多个常量
      const chunkSize = 2097152,
        chunkList = [], // 保存所有切片的数组
        chunkListLength = Math.ceil(fileObj.size / chunkSize), // 计算总共多个切片
        suffix = /\.([0-9A-z]+)$/.exec(fileObj.name)[1]; // 文件后缀名

      // 根据文件内容生成 hash 值