npm install element-ui --save
npm install spark-md5 --save
npm install axios --save

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)  import Axios from 'axios'
Vue.prototype.axios = Axios;  import QS from 'qs'
Vue.prototype.qs = QS;

import SparkMD5 from 'spark-md5'//错误信息
function getError(action, option, xhr) {  let msg  if (xhr.response) {  msg = `${xhr.response.error || xhr.response}`  } else if (xhr.responseText) {  msg = `${xhr.responseText}`  } else {  msg = `fail to post ${action} ${xhr.status}`  }  const err = new Error(msg)  err.status = xhr.status  err.method = 'post'  err.url = action  return err
}
// 上传成功完成合并之后，获取服务器返回的json
function getBody(xhr) {  const text = xhr.responseText || xhr.response  if (!text) {  return text  }  try {  return JSON.parse(text)  } catch (e) {  return text  }
}  // 分片上传的自定义请求，以下请求会覆盖element的默认上传行为
export default function upload(option) {  if (typeof XMLHttpRequest === 'undefined') {  return  }  const spark = new SparkMD5.ArrayBuffer()// md5的ArrayBuffer加密类  const fileReader = new FileReader()// 文件读取类  const action = option.action // 文件上传上传路径  const chunkSize = 1024 * 1024 * 1 // 单个分片大小，这里测试用1m  let md5 = ''// 文件的唯一标识  const optionFile = option.file // 需要分片的文件  let fileChunkedList = [] // 文件分片完成之后的数组  const percentage = [] // 文件上传进度的数组，单项就是一个分片的进度  // 文件开始分片，push到fileChunkedList数组中， 并用第一个分片去计算文件的md5  for (let i = 0; i < optionFile.size; i = i + chunkSize) {  const tmp = optionFile.slice(i, Math.min((i + chunkSize), optionFile.size))  if (i === 0) {  fileReader.readAsArrayBuffer(tmp)  }  fileChunkedList.push(tmp)  }  // 在文件读取完毕之后，开始计算文件md5，作为文件唯一标识  fileReader.onload = async (e) => {  spark.append(e.target.result)  md5 = spark.end() + new Date().getTime()  console.log('文件唯一标识--------', md5)  // 将fileChunkedList转成FormData对象，并加入上传时需要的数据  fileChunkedList = fileChunkedList.map((item, index) => {  const formData = new FormData()  if (option.data) {  // 额外加入外面传入的data数据  Object.keys(option.data).forEach(key => {  formData.append(key, option.data[key])  })  // 这些字段看后端需要哪些，就传哪些，也可以自己追加额外参数  formData.append(option.filename, item, option.file.name)// 文件  formData.append('chunkNumber', index + 1)// 当前文件块  formData.append('chunkSize', chunkSize)// 单个分块大小  formData.append('currentChunkSize', item.size)// 当前分块大小  formData.append('totalSize', optionFile.size)// 文件总大小  formData.append('identifier', md5)// 文件标识  formData.append('filename', option.file.name)// 文件名  formData.append('totalChunks', fileChunkedList.length)// 总块数  }  return { formData: formData, index: index }  })  // 更新上传进度条百分比的方法  const updataPercentage = (e) => {  let loaded = 0// 当前已经上传文件的总大小  percentage.forEach(item => {  loaded += item  })  e.percent = loaded / optionFile.size * 100  option.onProgress(e)  }  // 创建队列上传任务，limit是上传并发数，默认会用两个并发  function sendRequest(chunks, limit = 2) {  return new Promise((resolve, reject) => {  const len = chunks.length  let counter = 0  let isStop = false  const start = async () => {  if (isStop) {  return  }  const item = chunks.shift()  console.log()  if (item) {  const xhr = new XMLHttpRequest()  const index = item.index  // 分片上传失败回调  xhr.onerror = function error(e) {  isStop = true  reject(e)  }  // 分片上传成功回调  xhr.onload = function onload() {  if (xhr.status < 200 || xhr.status >= 300) {  isStop = true  reject(getError(action, option, xhr))  }  if (counter === len - 1) {  // 最后一个上传完成  resolve()  } else {  counter++  start()  }  }  // 分片上传中回调  if (xhr.upload) {  xhr.upload.onprogress = function progress(e) {  if (e.total > 0) {  e.percent = e.loaded / e.total * 100  }  percentage[index] = e.loaded  console.log(index)  updataPercentage(e)  }  }  xhr.open('post', action, true)  if (option.withCredentials && 'withCredentials' in xhr) {  xhr.withCredentials = true  }  const headers = option.headers || {}  for (const item in headers) {  if (headers.hasOwnProperty(item) && headers[item] !== null) {  xhr.setRequestHeader(item, headers[item])  }  }  // 文件开始上传  xhr.send(item.formData);  }  }  while (limit > 0) {  setTimeout(() => {  start()  }, Math.random() * 1000)  limit -= 1  }  })  }  try {  // 调用上传队列方法 等待所有文件上传完成  await sendRequest(fileChunkedList,2)  // 这里的参数根据自己实际情况写  const data = {  identifier: md5,  filename: option.file.name,  totalSize: optionFile.size  }  // 给后端发送文件合并请求  const fileInfo = await this.axios({  method: 'post',  url: 'http://localhost:8000/mergefile/',  data: this.qs.stringify(data)  }, {  headers: {  "Content-Type": "multipart/form-data"  }  }).catch(error => {  console.log("ERRRR:: ", error.response.data);  });  console.log(fileInfo);  if (fileInfo.data.code === 200) {  const success = getBody(fileInfo.request)  option.onSuccess(success)  return  }  } catch (error) {  option.onError(error)  }  }
}

<template>  <div>  <el-upload  :http-request="chunkUpload"  :ref="chunkUpload"  :action="uploadUrl"  :data="uploadData"  :on-error="onError"  :before-remove="beforeRemove"  name="file" >  <el-button size="small" type="primary">点击上传</el-button>  </el-upload>  </div>  </template>  <script>  //js部分
import chunkUpload from './chunkUpload'
export default {  data() {  return {  uploadData: {  //这里面放额外携带的参数  },  //文件上传的路径  uploadUrl: 'http://localhost:8000/uploadfile/', //文件上传的路径  chunkUpload: chunkUpload // 分片上传自定义方法，在头部引入了  }  },  methods: {  onError(err, file, fileList) {  this.$store.getters.chunkUploadXhr.forEach(item => {  item.abort()  })  this.$alert('文件上传失败，请重试', '错误', {  confirmButtonText: '确定'  })  },  beforeRemove(file) {  // 如果正在分片上传，则取消分片上传  if (file.percentage !== 100) {  this.$store.getters.chunkUploadXhr.forEach(item => {  item.abort()  })  }  }  }
}  </script>  <style>  </style>

npm run dev

pip3 install python-multipart

from uploadfile import router
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from model import database
from fastapi.middleware.cors import CORSMiddleware  app = FastAPI()  origins = [  "*"
]
app.add_middleware(  CORSMiddleware,  allow_origins=origins,  allow_credentials=True,  allow_methods=["*"],  allow_headers=["*"],
)  app.mount("/static", StaticFiles(directory="static"), name="static")  templates = Jinja2Templates(directory="templates")  app.include_router(router)  @app.on_event("startup")
async def startup():  await database.connect()  @app.on_event("shutdown")
async def shutdown():  await database.disconnect()  @app.get("/")
def read_root():  return {"Hello": "World"}

@router.post("/uploadfile/")
async def uploadfile(file: UploadFile = File(...), chunkNumber: str = Form(...), identifier: str = Form(...)):  task = identifier          # 获取文件唯一标识符  chunk = chunkNumber        # 获取该分片在所有分片中的序号  filename = '%s%s' % (task,chunk)           # 构成该分片唯一标识符  contents = await file.read() #异步读取文件  with open('./static/upload/%s' % filename, "wb") as f:  f.write(contents)  print(file.filename)  return {"filename": file.filename}  @router.post("/mergefile/")
async def uploadfile(identifier: str = Form(...), filename: str = Form(...)):  target_filename = filename  # 获取上传文件的文件名  task = identifier              # 获取文件的唯一标识符  chunk = 1                                       # 分片序号  with open('./static/upload/%s' % target_filename, 'wb') as target_file:  # 创建新文件  while True:  try:  filename = './static/upload/%s%d' % (task,chunk)  # 按序打开每个分片  source_file = open(filename, 'rb')  # 读取分片内容写入新文件  target_file.write(source_file.read())  source_file.close()  except IOError:  break  chunk += 1  os.remove(filename)  return {"code":200}

uvicorn main:app --reload