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-uploadref="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>