npm create vue 并取名為big-file-upload-fontend
通過(guò) npm i  安裝以下內(nèi)容
  "dependencies": {
    "axios": "^1.7.9",
    "element-plus": "^2.9.1",
    "js-sha256": "^0.11.0",
    "vue": "^3.5.13"
  },

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// app.use(ElementPlus)
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

<template>
  <div class="button">
    <el-upload
        ref="uploadRef"
        class="upload-demo"
        :http-request="uploadFile"
        :show-file-list="false"
    >
      <el-button type="primary">點(diǎn)擊上傳文件</el-button>
    </el-upload>
  </div>
</template>
<script setup>
import axios from 'axios'
import {sha256} from 'js-sha256'

const uploadFile = ({file}) => {
  // 每4MB為一個(gè)小文件
  const chunkSize = 4 * 1024 * 1024; // 4MB
  // 文件總大小
  const fileSize = file.size;
  // 分成了多少個(gè)片段
  const chunks = Math.ceil(fileSize / chunkSize);
  // 保證文件唯一
  const sha256Promise = sha256(file.name); // sha256的參數(shù)只接收字符串
  // 詢問(wèn)已經(jīng)上傳了幾個(gè)片段
  const checkUploadedChunks = () => {
    return axios.post('http://127.0.0.1:8000/api/check', {
      sha256Promise: sha256Promise
    }).then(response => {
      return response.data; // response.data 就是下邊的 uploadedChunks
    });
  };

  return checkUploadedChunks().then(async uploadedChunks => {
    if (uploadedChunks.length === chunks) {
      console.log("已經(jīng)上傳完成就不需要再重復(fù)上傳")
      return Promise.resolve();
    }
    for (let i = 0; i < chunks; i++) {
      const formData = new FormData();
      // 將之前上傳過(guò)的片段過(guò)濾掉，即不上傳之前上傳過(guò)的內(nèi)容
      if (uploadedChunks.includes(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);
      formData.append('filename', file.name);
      // 一次只上傳一個(gè)片段，本次上傳完成后才上傳下一個(gè)
      const res = await axios.post('http://127.0.0.1:8000/api/upload', formData)
    }
  });
};
</script>

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

MIDDLEWARE = [
	......
	'django.contrib.sessions.middleware.SessionMiddleware',
    "corsheaders.middleware.CorsMiddleware",  # CorsMiddleware一定要在CommonMiddleware之前
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware', #  注釋掉這個(gè)
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    ......
]
# 并在文件最后添加上允許所有跨域
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')
# 將STATIC_URL = 'statics/' 替換為下邊這三行
STATIC_URL = 'statics/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "../statics"),
]








# 完整的setting設(shè)置如下：
"""
Django settings for big_file_upload_backend project.

Generated by 'django-admin startproject' using Django 4.2.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""
import os
from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-%sa^&p^%m3+m0ex%@y%la0(zzt4y4k3l%0=p#tipx-kz6w*#=d'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    "corsheaders.middleware.CorsMiddleware",
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'big_file_upload_backend.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'big_file_upload_backend.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

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

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_HEADERS = ('*')

from django.contrib import admin
from django.urls import path
from big_file_upload_backend.views import checks, upload

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/check', checks),
    path('api/upload', upload),
]

import json
import os
from django.http import JsonResponse
from big_file_upload_backend import settings


def checks(request):
    if request.method == "POST":
        body = json.loads(request.body.decode("utf-8"))
        filename = body.get("sha256Promise", None)
        base_path = settings.STATIC_URL+'record_files/'+filename+'.txt'
        # base_path = '../statics/record_files/'+filename+'.txt'
        file_is_exits = os.path.exists(base_path)
        # 判斷文件是否存在，存在則說(shuō)明之前至少上傳過(guò)一次
        if file_is_exits:
            with open(base_path, 'r') as f:
                check_list = json.loads(f.readline())
        else:
            # 不存在就返回空
            check_list = []
        return JsonResponse(check_list, safe=False)


def upload(request):
    if request.method == "POST":
        # 注意這里用的是request.FILES 因?yàn)閏hunk為文件流形式
        chunk = request.FILES.get("chunk")
        # 當(dāng)前的切片編號(hào)
        chunk_number = request.POST.get("chunkNumber")
        # 總切片數(shù)量
        chunks_total = int(request.POST.get("chunksTotal"))
        # 文件名唯一標(biāo)識(shí)
        sha256_promise = request.POST.get("sha256Promise")
        # 文件名稱
        filename = request.POST.get("filename")
        # base_path = '../statics/upload_files/'+sha256_promise # 這樣寫無(wú)效
        base_path = settings.STATIC_URL + "upload_files/" + sha256_promise  # 必須這樣寫
        # record_path中的txt文件用于記錄已經(jīng)上傳過(guò)的切片
        record_path = settings.STATIC_URL + "record_files/" + sha256_promise+'.txt'  # 必須這樣寫
        os.makedirs(base_path, exist_ok=True)
        # 后綴名
        ext = filename.split(".")[-1]
        # 小切片的文件名稱
        order_file = chunk_number+'.'+ext
        fname = base_path+"/" + order_file

        with open(fname, 'wb') as f:
            for line in chunk:
                # 將上傳的文件寫入小切片中，等上傳完成后進(jìn)行合并
                f.write(line)
        # 等寫完了才做判斷
        chunk_number_int = int(chunk_number)  # 將字符串轉(zhuǎn)成int
        line_list = [int(chunk_number)]  # 默認(rèn)先添加一個(gè)切片片段
        if os.path.exists(record_path):
            with open(record_path, 'r') as f:
                line_data = f.readline()  # 讀取已經(jīng)上傳的小切片
                if line_data == '':
                    pass
                else:
                    line_list = json.loads(line_data)  # 將字符串形式的數(shù)組轉(zhuǎn)為python數(shù)組
                if chunk_number_int not in line_list:
                    line_list.append(chunk_number_int)  # 如果當(dāng)前切片號(hào)不在已上傳的數(shù)組中則添加
        with open(record_path, 'w') as f:
            f.write(json.dumps(line_list))  # 將已上傳的片段列表重新寫回記錄文件中
        #  合并小切片片段段
        if len(line_list) == chunks_total:
            with open(base_path+"/"+filename, "wb") as f:
                # 按照升序一個(gè)一個(gè)合并
                for num in sorted(line_list):
                    with open(base_path+"/"+str(num)+"."+ext, 'rb') as r:
                        f.write(r.read())
                    # 讀取完畢將片段刪除，只保留合并后的文件
                    os.remove(base_path+"/"+str(num)+"."+ext)
        # 返回沒啥用
        check_list = {"chunk_number": chunk_number, "code": 200}
        return JsonResponse(check_list)

record_files
upload_files

前端：npm run dev
后端： python manage.py runserver