devbox
小惠珠哦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

大文件上传前端vue3+后端FastApi_vue3 大文件上传

作者：小惠珠哦 | 2024-08-18 03:41:48

赞

踩

vue3 大文件上传

vue3中大文件上传我使用的是vue-simple-uploader，文件加密使用MD5这个三方插件，比较方便，这个插件很不错，有以下功能亮点：

  1. 1、支持文件、多文件、文件夹上传
  2. 2、支持拖拽文件、文件夹上传
  3. 3、统一对待文件和文件夹，方便操作管理
  4. 4、可暂停、继续上传
  5. 5、错误处理
  6. 6、上传队列管理，支持最大并发上传
  7. 7、分块上传
  8. 8、支持进度、预估剩余时间、出错自动重试、重传等操作

在vue3中使用用需要注意安装的版本，否则使用会报错

npm i --save vue-simple-uploader@next spark-md5

 安装后版本是：

9b0afe7ef4fa48bcab3ab729daf6f721.png

 安装好后在main.js中引入

  1. // 文件分片上传
  2. import uploader from 'vue-simple-uploader';
  3. import 'vue-simple-uploader/dist/style.css';
  4.  
  5. const app = createApp(App)
  6.  
  7. app.use(uploader)

 

  1. <template>
  2.   <div>
  3.     <uploader
  4.       ref="uploaderRef"
  5.       :options="options"
  6.       :autoStart="false"
  7.       :file-status-text="fileStatusText"
  8.       class="uploader-ui"
  9.       @file-added="onFileAdded"
  10.       @file-success="onFileSuccess"
  11.       @file-progress="onFileProgress"
  12.       @file-error="onFileError"
  13.     >
  14.       <uploader-unsupport></uploader-unsupport>
  15.       <uploader-drop>
  16.         <p>拖拽文件到此处或</p>
  17.         <uploader-btn id="global-uploader-btn" ref="uploadBtn" :attrs="attrs"
  18.           >选择文件<i class="el-icon-upload el-icon--right"></i
  19.         ></uploader-btn>
  20.       </uploader-drop>
  21.       <uploader-list></uploader-list>
  22.     </uploader>
  23.   </div>
  24. </template>
  25.    
  26.   <script setup>
  27. import { reactive, ref, onMounted } from "vue";
  28. import SparkMD5 from "spark-md5";
  29. import { mergeFile } from "@/apis/upload";
  30.  
  31. const options = reactive({
  32.   //目标上传 URL，默认POST, import.meta.env.VITE_API_URL = api
  33.   // target ==》http://localhost:8000/api/uploader/chunk
  34.   target: "http://localhost:8000/chunk",
  35.   query: {},
  36.   headers: {
  37.     // 需要携带token信息，当然看各项目情况具体定义
  38.     Authorization: "Bearer " + localStorage.getItem("access_token"),
  39.   },
  40.   //分块大小(单位：字节)
  41.   chunkSize: 1024 * 1024 * 5,
  42.   //上传文件时文件内容的参数名，对应chunk里的Multipart对象名，默认对象名为file
  43.   fileParameterName: "file",
  44.   //失败后最多自动重试上传次数
  45.   maxChunkRetries: 3,
  46.   //是否开启服务器分片校验，对应GET类型同名的target URL
  47.   testChunks: true,
  48.   // 剩余时间
  49.   parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
  50.     return parsedTimeRemaining
  51.       .replace(/\syears?/, "年")
  52.       .replace(/\days?/, "天")
  53.       .replace(/\shours?/, "小时")
  54.       .replace(/\sminutes?/, "分钟")
  55.       .replace(/\sseconds?/, "秒");
  56.   },
  57.   // 服务器分片校验函数
  58.   checkChunkUploadedByResponse: function (chunk, response_msg) {
  59.     let objMessage = JSON.parse(response_msg);
  60.     console.log(response_msg, "response_msg");
  61.     if (objMessage.data.isExist) {
  62.       return true;
  63.     }
  64.     return (objMessage.data.uploaded || []).indexOf(chunk.offset + 1) >= 0;
  65.   },
  66. });
  67. const attrs =  reactive({
  68.         // 设置上传文件类型
  69. 	   accept: ['.rar','.zip']
  70. 	 })
  71. const fileStatusText = reactive({
  72.   success: "上传成功",
  73.   error: "上传失败",
  74.   uploading: "上传中",
  75.   paused: "暂停",
  76.   waiting: "等待上传",
  77. });
  78. onMounted(() => {
  79.   console.log(uploaderRef.value, "uploaderRef.value");
  80. });
  81. function onFileAdded(file) {
  82.   computeMD5(file);
  83. }
  84.  
  85. async function onFileSuccess(rootFile, file, response, chunk) {
  86.   //refProjectId为预留字段，可关联附件所属目标，例如所属档案，所属工程等
  87.   //   判断是否秒传成功，成功取消合并
  88.   console.log("秒传成功", response);
  89.   let objMessage = JSON.parse(response);
  90.   if (objMessage.data.isExist != null && objMessage.data.isExist == true) {
  91.     console.log("秒传成功", response);
  92.     window.$message.success("秒传成功");
  93.     return;
  94.   }
  95.   const res = await mergeFile({
  96.     filename: file.name, //文件名称
  97.     identifier: file.uniqueIdentifier, //文件唯一标识
  98.     totalChunks: chunk.offset + 1, //文件总分片数
  99.   });
  100.   if (res.code === 200) {
  101.     console.log("上传成功", res);
  102.     window.$message.success("上传成功");
  103.   } else {
  104.     console.log("上传失败", res);
  105.     window.$message.error("上传失败");
  106.   }
  107. }
  108. function onFileError(rootFile, file, response, chunk) {
  109.   console.log("上传完成后异常信息：" + response);
  110. }
  111.  
  112. /**
  113.  * 计算md5，实现断点续传及秒传
  114.  * @param file
  115.  */
  116. function computeMD5(file) {
  117.   file.pause();
  118.  
  119.   //单个文件的大小限制1G
  120.   let fileSizeLimit = 1 * 1024 * 1024 * 1024;
  121.   console.log("文件大小：" + file.size);
  122.   console.log("限制大小：" + fileSizeLimit);
  123.   if (file.size > fileSizeLimit) {
  124.     file.cancel();
  125.     window.$message.error("文件大小不能超过1G");
  126.   }
  127.  
  128.   let fileReader = new FileReader();
  129.   let time = new Date().getTime();
  130.   let blobSlice =
  131.     File.prototype.slice ||
  132.     File.prototype.mozSlice ||
  133.     File.prototype.webkitSlice;
  134.   let currentChunk = 0;
  135.   const chunkSize = 10 * 1024 * 1000;
  136.   let chunks = Math.ceil(file.size / chunkSize);
  137.   let spark = new SparkMD5.ArrayBuffer();
  138.   //如果文件过大计算非常慢，因此采用只计算第1块文件的md5的方式
  139.   let chunkNumberMD5 = 1;
  140.  
  141.   loadNext();
  142.  
  143.   fileReader.onload = (e) => {
  144.     spark.append(e.target.result);
  145.  
  146.     if (currentChunk < chunkNumberMD5) {
  147.       loadNext();
  148.     } else {
  149.       let md5 = spark.end();
  150.       file.uniqueIdentifier = md5;
  151.       // 计算完毕开始上传
  152.       file.resume();
  153.       console.log(
  154.         `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
  155.           file.size
  156.         } 用时：${new Date().getTime() - time} ms`
  157.       );
  158.     }
  159.   };
  160.  
  161.   fileReader.onerror = function () {
  162.     file.cancel();
  163.   };
  164.  
  165.   function loadNext() {
  166.     let start = currentChunk * chunkSize;
  167.     let end = start + chunkSize >= file.size ? file.size : start + chunkSize;
  168.  
  169.     fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
  170.     currentChunk++;
  171.     console.log("计算第" + currentChunk + "块");
  172.   }
  173. }
  174. const uploaderRef = ref();
  175. function close() {
  176.   uploaderRef.value.cancel();
  177. }
  178. function error(msg) {
  179.   console.log(msg, "msg");
  180. }
  181. </script>
  182.    
  183.   <style scoped>
  184. .uploader-ui {
  185.   padding: 15px;
  186.   margin: 40px auto 0;
  187.   font-size: 12px;
  188.   font-family: Microsoft YaHei;
  189.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  190. }
  191. .uploader-ui .uploader-btn {
  192.   margin-right: 4px;
  193.   font-size: 12px;
  194.   border-radius: 3px;
  195.   color: #fff;
  196.   background-color: #58bfc1;
  197.   border-color: #58bfc1;
  198.   display: inline-block;
  199.   line-height: 1;
  200.   white-space: nowrap;
  201. }
  202. .uploader-ui .uploader-list {
  203.   max-height: 440px;
  204.   overflow: auto;
  205.   overflow-x: hidden;
  206.   overflow-y: auto;
  207. }
  208. </style>

后端代码：

使用需要安装FastAPI和aiofiles

安装命令

  1. pip install fastapi
  2. pip install aiofiles

 

  1. #!/usr/bin/env python
  2. # -*- coding: utf-8 -*-
  3. # @Time    : 2023/2/10 16:44
  4. # @Author  : YueJian
  5. # @File    : test2.py
  6. # @Description :
  7.  
  8. import os
  9. import os.path
  10. import re
  11. import shutil
  12. import stat
  13. from email.utils import formatdate
  14. from mimetypes import guess_type
  15. from pathlib import Path
  16. from urllib.parse import quote
  17.  
  18. import aiofiles
  19. import uvicorn
  20. from fastapi import Body, File, Path as F_Path, UploadFile, Request
  21. from fastapi import Form, FastAPI
  22. from starlette.responses import StreamingResponse
  23.  
  24. app = FastAPI()
  25. # 上传位置
  26. UPLOAD_FILE_PATH = "./static/file"
  27.  
  28.  
  29. @app.get("/file-slice")
  30. async def check_file(identifier: str, totalChunks: int):
  31.     """
  32.     判断上传文件是否存在
  33.     :param identifier:
  34.     :param totalChunks:
  35.     :return:
  36.     """
  37.     path = os.path.join(UPLOAD_FILE_PATH, identifier)
  38.     if not os.path.exists(path):
  39.         # 不存在
  40.         return {"code": 200, "data": {"isExist": False}}
  41.     else:
  42.         # 存在时判断分片数是否
  43.         chunks = [int(str(i).split("_")[1]) for i in os.listdir(path)]
  44.         return {"code": 200, "data": {"isExist": False, "uploaded": chunks}}
  45.  
  46.  
  47. @app.post("/file-slice")
  48. async def upload_file(
  49.         request: Request,
  50.         identifier: str = Form(..., description="文件唯一标识符"),
  51.         chunkNumber: str = Form(..., description="文件分片序号（初值为1）"),
  52.         file: UploadFile = File(..., description="文件")
  53. ):
  54.     """文件分片上传"""
  55.     path = Path(UPLOAD_FILE_PATH, identifier)
  56.     if not os.path.exists(path):
  57.         os.makedirs(path)
  58.     file_name = Path(path, f'{identifier}_{chunkNumber}')
  59.     if not os.path.exists(file_name):
  60.         async with aiofiles.open(file_name, 'wb') as f:
  61.             await f.write(await file.read())
  62.     return {"code": 200, "data": {
  63.         'chunk': f'{identifier}_{chunkNumber}'
  64.     }}
  65.  
  66.  
  67. @app.put("/file-merge")
  68. async def merge_file(
  69.         request: Request,
  70.         filename: str = Body(..., description="文件名称含后缀"),
  71.         identifier: str = Body(..., description="文件唯一标识符"),
  72.         totalChunks: int = Body(..., description="总分片数")
  73. ):
  74.     """合并分片文件"""
  75.     target_file_name = Path(UPLOAD_FILE_PATH, filename)
  76.     path = Path(UPLOAD_FILE_PATH, identifier)
  77.     try:
  78.         async with aiofiles.open(target_file_name, 'wb+') as target_file:  # 打开目标文件
  79.             for i in range(len(os.listdir(path))):
  80.                 temp_file_name = Path(path, f'{identifier}_{i + 1}')
  81.                 async with aiofiles.open(temp_file_name, 'rb') as temp_file:  # 按序打开每个分片
  82.                     data = await temp_file.read()
  83.                     await target_file.write(data)  # 分片内容写入目标文件
  84.     except Exception as e:
  85.         print(e)
  86.         return {"code": 400, "msg": "合并失败"}
  87.     shutil.rmtree(path)  # 删除临时目录
  88.     return {"code": 200, "data": {"filename": filename, "url": f"/api/file/file-slice/{filename}"}}
  89.  
  90.  
  91. @app.get("/file-slice/{file_name}")
  92. async def download_file(request: Request, file_name: str = F_Path(..., description="文件名称（含后缀）")):
  93.     """分片下载文件，支持断点续传"""
  94.     # 检查文件是否存在
  95.     file_path = Path(UPLOAD_FILE_PATH, file_name)
  96.     if not os.path.exists(file_path):
  97.         return {"code": 400, "msg": "文件不存在"}
  98.     # 获取文件的信息
  99.     stat_result = os.stat(file_path)
  100.     content_type, encoding = guess_type(file_path)
  101.     content_type = content_type or 'application/octet-stream'
  102.     # 读取文件的起始位置和终止位置
  103.     range_str = request.headers.get('range', '')
  104.     range_match = re.search(r'bytes=(\d+)-(\d+)', range_str, re.S) or re.search(r'bytes=(\d+)-', range_str, re.S)
  105.     if range_match:
  106.         start_bytes = int(range_match.group(1))
  107.         end_bytes = int(range_match.group(2)) if range_match.lastindex == 2 else stat_result.st_size - 1
  108.     else:
  109.         start_bytes = 0
  110.         end_bytes = stat_result.st_size - 1
  111.     # 这里 content_length 表示剩余待传输的文件字节长度
  112.     content_length = stat_result.st_size - start_bytes if stat.S_ISREG(stat_result.st_mode) else stat_result.st_size
  113.     # 构建文件名称
  114.     name, *suffix = file_name.rsplit('.', 1)
  115.     suffix = f'.{suffix[0]}' if suffix else ''
  116.     filename = quote(f'{name}{suffix}')  # 文件名编码，防止中文名报错
  117.     # 打开文件从起始位置开始分片读取文件
  118.     return StreamingResponse(
  119.         file_iterator(file_path, start_bytes, 1024 * 1024 * 5),  # 每次读取 5M
  120.         media_type=content_type,
  121.         headers={
  122.             'content-disposition': f'attachment; filename="{filename}"',
  123.             'accept-ranges': 'bytes',
  124.             'connection': 'keep-alive',
  125.             'content-length': str(content_length),
  126.             'content-range': f'bytes {start_bytes}-{end_bytes}/{stat_result.st_size}',
  127.             'last-modified': formatdate(stat_result.st_mtime, usegmt=True),
  128.         },
  129.         status_code=206 if start_bytes > 0 else 200
  130.     )
  131.  
  132.  
  133. def file_iterator(file_path, offset, chunk_size):
  134.     """
  135.     文件生成器
  136.     :param file_path: 文件绝对路径
  137.     :param offset: 文件读取的起始位置
  138.     :param chunk_size: 文件读取的块大小
  139.     :return: yield
  140.     """
  141.     with open(file_path, 'rb') as f:
  142.         f.seek(offset, os.SEEK_SET)
  143.         while True:
  144.             data = f.read(chunk_size)
  145.             if data:
  146.                 yield data
  147.             else:
  148.                 break
  149.  
  150.  
  151. if __name__ == '__main__':
  152.     uvicorn.run("main:app", host="0.0.0.0", port=8000)

个人博客网站灵动空间，欢迎访问

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/995808
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号