python vue3实现大文件分段续传(断点续传)--带暂停和继续功能

后端内容无变化具体设置可参考上一篇点击进入上一篇，需要注意的是big_file_upload_backend/settings.py下的 是statics 多个s其实无所谓，但是要一致

STATIC_URL = "statics/"
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "../statics"),
]

前端创建项目：

前端增加了暂停和继续上传功能具体代码：

<template>
  <div class="button">
    <el-upload
        ref="uploadRef"
        class="upload-demo"
        :http-request="uploadFile"
        :show-file-list="false"
    >
      <el-button type="primary">点击上传文件</el-button>
    </el-upload>
  </div>
  <div>
    <el-button @click="is_paused" type="primary">暂停</el-button>
    <el-button @click="is_continue" type="success">继续</el-button>
  </div>
</template>
<script setup>
import axios from 'axios'
import {sha256} from 'js-sha256'
import {ref} from "vue";
// 标记暂停
const flag = ref(true)
// 存放暂停以后得
const axios_list = ref([])
const sha256Promise = ref('')


const checkUploadedChunks = (sha256Promise) => {
  return axios.post('http://127.0.0.1:8000/api/check', {
    sha256Promise: sha256Promise
  }).then(response => {
    return response.data; // response.data 就是下边的 uploadedChunks
  });
};
const uploadFile = ({file}) => {
  // 每次调用之前先重置一下
  axios_list.value = []
  flag.value = true

  // 每4MB为一个小文件
  const chunkSize = 4 * 1024 * 1024; // 4MB
  // 文件总大小
  const fileSize = file.size;
  // 分成了多少个片段
  const chunks = Math.ceil(fileSize / chunkSize);
  // 保证文件唯一
  sha256Promise.value = sha256(file.name); // sha256的参数只接收字符串

  return checkUploadedChunks(sha256Promise.value).then(async uploadedChunks => {
    if (uploadedChunks.length === chunks) {
      console.log("已经上传完成就不需要再重复上传")
      return Promise.resolve();
    }
    for (let i = 0; i < chunks; i++) {
      const formData = new FormData();
      // 将之前上传过的片段过滤掉，即不上传之前上传过的内容
      if (uploadedChunks.includes(i + 1)) {
        console.log("跳过已上传部分片段:",  i + 1);
        continue;
      }
      const start = i * chunkSize;
      // 将文件分片
      const chunk = file.slice(start, start + chunkSize);
      // 使用FormData形式上传文件
      formData.append('chunk', chunk);
      formData.append('chunkNumber', i + 1);
      formData.append('chunksTotal', chunks);
      formData.append('sha256Promise', sha256Promise.value);
      formData.append('filename', file.name);
      // 一次只上传一个片段，本次上传完成后才上传下一个
      if (flag.value){
        const res = await axios.post('http://127.0.0.1:8000/api/upload', formData)
        // console.log("formData", formData) // 直接打印显示的为空，但是实际上是有值的，可以用下面的方法打印
        // for (const [key, value] of formData) {
        //   console.log(key, value)
        // }
      }else {
        axios_list.value.push(formData)
      }
    }
  });
};
const is_paused = () => {
  flag.value = false
}

const is_continue = async () => {
  if (axios_list.value.length>0){
    // 先检查已经上传过的
    checkUploadedChunks(axios_list.value[0].get("sha256Promise")).then(async uploadedChunks=>{
      for (const item of axios_list.value) {
      // uploadedChunks: 已经上传过的片段列表
        let chunkNumber = parseInt(item.get("chunkNumber"))
        // 已上传过则跳过
        if (!uploadedChunks.includes(chunkNumber)){
            await axios.post('http://127.0.0.1:8000/api/upload', item)
            if (!flag.value){
              break
            }
        }else {
          console.log("跳过已经上传过的片段号：", chunkNumber)
        }
      }
    })
  }else {
    //   消费完了，没有数据了
  }
  flag.value = true
}
</script>

<style >
html, body{
  height: 100%;
  width: 100%;
  //background-color: pink;
}
</style>

效果如下：

点击暂停的效果：

再点击继续