首页 > 其他分享 >记录--经常被cue大文件上传，忍不住试一下

记录--经常被cue大文件上传，忍不住试一下

时间：2023-12-29 18:44:27浏览次数：37  
标签：const -- return 切片 cue 试一下 chunks hash 上传

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

大文件上传主要步骤：

  1. 获取文件对象，切分文件
  2. 根据文件切片，计算文件唯一hash值
  3. 上传文件切片，服务端保存起来
  4. 合并文件切片，前端发送合并请求，服务端将文件切片合并为原始文件
  5. 秒传，对于已经存在的分片，可以前端发个请求获取已经上传的文件切片信息，前端判断已经上传的切片不再发送切片上传请求；或者后端验证已经存在的切片，直接返回成功结果，后端不再重复写入保存
  6. 暂停上传，使用axios的取消请求
  7. 继续上传，跟秒传逻辑一样，先发个请求验证，已经上传的切片不再重复发请求，将没有上传的切片继续上传

技术栈：

包管理工具：

  • pnpm

前端：

  • vue 3.3.11
  • vite
  • axios
  • spark-md5：根据文件内容生成唯一hash值

后端：

1、文件分片

先用vite搭一个vue3项目 pnpm create vite

首先拿到上传的文件，通过 <input type="file"/>change事件拿到File文件对象，File继承自Blob，可以调用Blob的实例方法，然后用slice方法做分割；

这篇文章介绍了 JS中的二进制对象：Blob、File、ArrayBuffer，及转换处理：FileReader、URL.createObjectURL

// App.vue
<script setup>
import { ref } from "vue";
import { createChunks } from "./utils";

// 保存切片
const fileChunks = ref([]);

function handleFileChange(e) {
  // 获取文件对象
  const file = e.target.files[0];
  if (!file) {
    return;
  }
  fileChunks.value = createChunks(file);
  console.log(fileChunks.value);
}
</script>

<template>
  <input type="file" @change="handleFileChange" />
  <button>上传</button>
</template>

// utils.js

// 默认每个切片3MB
const CHUNK_SIZE = 3 * 1024 * 1024;

export function createChunks(file, size = CHUNK_SIZE) {
  const chunks = [];
  for (let i = 0; i < file.size; i += size) {
    chunks.push(file.slice(i, i + size));
  }
  return chunks;
}

2、计算hash

上传文件给服务器，要区分一下不同文件，对于服务端已经存在的文件切片，前端不需要重复上传，服务器不需要重复处理，节约性能。要做到区分不同文件，就需要给每个文件一个唯一标识，用 spark-md5 这个库来根据文件内容生成唯一hash值，安装 pnpm add spark-md5。

// App.vue
<script setup>
import { ref } from "vue";
import { createChunks, calculateFileHash } from "./utils";

const fileChunks = ref([]);

async function handleFileChange(e) {
  const file = e.target.files[0];
  if (!file) {
    return;
  }
  fileChunks.value = createChunks(file);
  const sT = Date.now();
  const hash = await calculateFileHash(fileChunks.value);
  console.log(Date.now() - sT); //测试一下计算hash耗时
}

</script>
// utils.js
import SparkMD5 from "spark-md5";

export function calculateFileHash(chunkList) {
  return new Promise((resolve) => {
    const spark = new SparkMD5.ArrayBuffer();
    // FileReader读取文件内容
    const reader = new FileReader();
    reader.readAsArrayBuffer(new Blob(chunkList));
    // 读取成功回调
    reader.onload = (e) => {
      spark.append(e.target.result);
      resolve(spark.end());
    };
  });
}

上面calculateFileHash这个函数计算hash使用文件所有切片内容，如果文件很大，将会非常耗时，测试了一个526MB的文件，需要6813ms左右，为了保证所有切片都参与计算，也不至于太耗时，采取下面这种方式：

  • 第一个和最后一个切片全部计算
  • 其他切片取前、中、后两个字节参与计算

这种方式可能会损失一点准确性，如果计算出来的hash变了，就重新上传呗

// utils.js
const CHUNK_SIZE = 3 * 1024 * 1024;

export function calculateFileHash(chunkList) {
  return new Promise((resolve) => {
    const spark = new SparkMD5.ArrayBuffer();
    const reader = new FileReader();
    // 抽取chunk
    const chunks = [];
    for (let i = 0; i < chunkList.length; i++) {
      const chunk = chunkList[i];
      if (i === 0 || i === chunkList.length - 1) {
        chunks.push(chunk);
      } else {
        chunks.push(chunk.slice(0, 2));
        chunks.push(chunk.slice(CHUNK_SIZE / 2, CHUNK_SIZE / 2 + 2));
        chunks.push(chunk.slice(CHUNK_SIZE - 2, CHUNK_SIZE));
      }
    }
    reader.readAsArrayBuffer(new Blob(chunks));
    reader.onload = (e) => {
      spark.append(e.target.result);
      resolve(spark.end());
    };
  });
}

再次传同一个文件测试，只需要975ms左右

3、上传切片

前端逻辑：

这里要考虑一个问题，如果一个大文件切成了几十上百个切片，这时如果同时发送，浏览器负担很重，浏览器默认允许同时建立 6 个 TCP 持久连接，也就是说同一个域名同时能支持6个http请求，多余的会排队。这里就需要控制一下并发请求数量，设置为同时发送6个

// App.vue
<script setup>
import {
  createChunks,
  calculateFileHash,
  createFormData,
  concurrentChunksUpload,
} from "./utils";

async function uploadChunks() {
  const hash = await calculateFileHash(fileChunks.value);
  // 利用计算的文件hash构造formData
  const dataList = createFormData(fileChunks.value, hash);
  // 切片上传请求
  await concurrentChunksUpload(dataList);
}
</script

<template>
  <input type="file" @change="handleFileChange" />
  <button @click="uploadChunks()">上传</button>
</template>
// utils.js

const CHUNK_SIZE = 10 * 1024 * 1024;
const BASE_URL = "http://localhost:2024";

// 根据切片的数量组装相同数量的formData
export function createFormData(fileChunks, hash) {
  return fileChunks
    .map((chunk, index) => ({
      fileHash: hash,
      chunkHash: `${hash}-${index}`,
      chunk,
    }))
    .map(({ fileHash, chunkHash, chunk }) => {
      const formData = new FormData();
      formData.append("fileHash", fileHash);
      formData.append("chunkHash", chunkHash);
      formData.append(`chunk-${chunkHash}`, chunk);
      return formData;
    });
}

// 默认最大同时发送6个请求
export function concurrentChunksUpload(dataList, max = 6) {
  return new Promise((resolve) => {
    if (dataList.length === 0) {
      resolve([]);
      return;
    }
    const dataLength = dataList.length;
    // 保存所有成功结果
    const results = [];
    // 下一个请求
    let next = 0;
    // 请求完成数量
    let finished = 0;

    async function _request() {
      // next达到dataList个数，就停止
      if (next === dataLength) {
        return;
      }
      const i = next;
      next++;

      const formData = dataList[i];
      const url = `${BASE_URL}/upload-chunks`;
      try {
        const res = await axios.post(url, formData);
        results[i] = res.data;
        finished++;
        // 所有切片上传成功返回
        if (finished === dataLength) {
          resolve(results);
        }
        _request();
      } catch (err) {
        console.log(err);
      }
    }
    // 最大并发数如果大于formData个数，取最小数
    const minTimes = Math.min(max, dataLength);
    for (let i = 0; i < minTimes; i++) {
      _request();
    }
  });
}

后端逻辑：

浏览器跨域问题及几种常见解决方案：CORS，JSONP，Node代理，Nginx反向代理 ，分析如何解决浏览器跨域

const path = require("path");
const fs = require("fs");
const Koa = require("koa");
const KoaRouter = require("@koa/router");
const cors = require("@koa/cors");
const { koaBody } = require("koa-body");

const app = new Koa();
const router = new KoaRouter();
// 保存切片目录
const chunksDir = path.resolve(__dirname, "../chunks");

//cors解决跨域
app.use(cors()); 
app.use(router.routes()).use(router.allowedMethods());
app.listen(2024, () => console.log("Koa文件服务器启动"));

// 中间件:处理multipart/form-data，切片写入磁盘
const uploadKoaBody = koaBody({
  multipart: true,
  formidable: {
    // 设置保存切片的文件夹
    uploadDir: chunksDir,
    // 在保存到磁盘前回调
    onFileBegin(name, file) {
      if (!fs.existsSync(chunksDir)) {
        fs.mkdirSync(chunksDir);
      }
      // 切片重命名
      file.filepath = `${chunksDir}/${name}`;
    },
  },
});

// 上传chunks切片接口
router.post("/upload-chunks", uploadKoaBody, (ctx) => {
  ctx.body = { code: 200, msg: "文件上传成功" };
});

4、合并切片

前端逻辑：

当所有切片上传成功，发送合并请求

// App.vue
<script setup>
import {
  createChunks,
  calculateFileHash,
  createFormData,
  concurrentChunksUpload,
  mergeChunks
} from "./utils";

async function uploadChunks() {
  const hash = await calculateFileHash(fileChunks.value);
  // 利用计算的文件hash构造formData
  const dataList = createFormData(fileChunks.value, hash);
  // 切片上传请求
  await concurrentChunksUpload(dataList);
  // 等所有chunks发送完毕，发送合并请求
  mergeChunks(originFile.value.name);
}
</script

<template>
  <input type="file" @change="handleFileChange" />
  <button @click="uploadChunks()">上传</button>
</template>

// utils.js

export function mergeChunks(filename) {
  return axios.post(BASE_URL + "/merge-chunks", { filename, size: CHUNK_SIZE });
}

后端逻辑：

// 合并chunks接口
router.post("/merge-chunks", koaBody(), async (ctx) => {
  const { filename, size } = ctx.request.body;
  await mergeChunks(filename, size);
  ctx.body = { code: 200, msg: "合并成功" };
});

// 合并 chunks
async function mergeChunks(filename, size) {
  // 读取chunks目录中的文件名
  const chunksName = fs.readdirSync(chunksDir);
  if (!chunksName.length) return;
  // 保证切片合并顺序
  chunksName.sort((a, b) => a.split("-")[2] - b.split("-")[2]);
  // 提前创建要写入的static目录
  const fileDir = path.resolve(__dirname, "../static");
  if (!fs.existsSync(fileDir)) {
    fs.mkdirSync(fileDir);
  }
  // 最后写入的文件路径
  const filePath = path.resolve(fileDir, filename);
  const pipeStreams = chunksName.map((chunkName, index) => {
    const chunkPath = path.resolve(chunksDir, chunkName);
    // 创建写入流
    const writeStream = fs.createWriteStream(filePath, { start: index * size });
    return createPipeStream(chunkPath, writeStream);
  });
  await Promise.all(pipeStreams);
  // 全部写完，删除chunks切片目录
  fs.rmdirSync(chunksDir);
}

// 创建管道流写入
function createPipeStream(chunkPath, writeStream) {
  return new Promise((resolve) => {
    const readStream = fs.createReadStream(chunkPath);
    readStream.pipe(writeStream);
    readStream.on("end", () => {
      // 写完一个chunk，就删除
      fs.unlinkSync(chunkPath);
      resolve();
    });
  });
}

5、秒传文件

对于已经上传的文件，服务端这边可以判断，直接返回成功结果，不做重复保存的处理，节省时间；也可以前端先发一个请求获取已经上传的文件切片，就不再重复发送切片上传请求

服务端逻辑加一个中间件做判断：

// 中间件，已经存在的切片，直接返回成功结果
async function verifyChunks(ctx, next) {
  // 前端把切片hash放到请求路径上带过来
  const chunkName = ctx.request.querystring.split("=")[1];
  const chunkPath = path.resolve(chunksDir, chunkName);
  if (fs.existsSync(chunkPath)) {
    ctx.body = { code: 200, msg: "文件已上传" };
  } else {
    await next();
  }
}

// 上传chunks切片接口
router.post("/upload-chunks", verifyChunks, uploadKoaBody, (ctx) => {
  ctx.body = { code: 200, msg: "文件上传成功" };
});
前端这边修改一下请求路径，带个参数过去
export function concurrentChunksUpload(dataList, max = 6) {
  return new Promise((resolve) => {
      //...
      const formData = dataList[i];
      const chunkName = `chunk-${formData.get("chunkHash")}`;
      const url = `${BASE_URL}/upload-chunks?chunkName=${chunkName}`;
     //...
  });
}

6、暂停上传

前端逻辑

axios中可以使用同一个 cancel token 取消多个请求

<script setup>
import axios from "axios";

const CancelToken = axios.CancelToken;
let axiosSource = CancelToken.source();

function pauseUpload() {
  axiosSource.cancel?.();
}

async function uploadChunks(existentChunks = []) {
  const hash = await calculateFileHash(fileChunks.value);
  const dataList = createFormData(fileChunks.value, hash, existentChunks);
  await concurrentChunksUpload(axiosSource.token, dataList);
  // 等所有chunks发送完毕，发送合并请求
  mergeChunks(originFile.value.name);
}
</script>

<template>
  <input type="file" @change="handleFileChange" />
  <button @click="uploadChunks()">上传</button>
  <button @click="pauseUpload">暂停</button>
</template>

 

// utils.js

export function concurrentChunksUpload(sourceToken, dataList, max = 6) {
  return new Promise((resolve) => {
        //...
        const res = await axios.post(url, formData, {
          cancelToken: sourceToken,
        });
       //...
  });
}

7、继续上传

前端逻辑

要调用CancelToken.source()重新生成一个suource，发请求获取已经上传的chunks，过滤一下，不再重复发送，前面的秒传是在服务端判断的，也可以按这个逻辑来，已经上传的不重复发请求

<script setup>
import { getExistentChunks } from "./utils";

 async function continueUpload() {
  const { data } = await getExistentChunks();
  uploadChunks(data);
}

// existentChunks 默认空数组
async function uploadChunks(existentChunks = []) {
  const hash = await calculateFileHash(fileChunks.value);
  // existentChunks传入过滤已经上传的切片
  const dataList = createFormData(fileChunks.value, hash, existentChunks);
  // 重新生成source
  axiosSource = CancelToken.source();
  await concurrentChunksUpload(axiosSource.token, dataList);
  // 等所有chunks发送完毕，发送合并请求
  mergeChunks(originFile.value.name);
}

</script>

<template>
  <input type="file" @change="handleFileChange" />
  <button @click="uploadChunks()">上传</button>
  <button @click="pauseUpload">暂停</button>
  <button @click="continueUpload">继续</button>
</template>

 

// utils.js
export function createFormData(fileChunks, hash, existentChunks) {
  const existentChunksName = existentChunks
    // 如果切片有损坏，切片大小可能就不等于CHUNK_SIZE，重新传
    // 最后一张切片大小大概率是不等的
    .filter((item) => item.size === CHUNK_SIZE)
    .map((item) => item.filename);

  return fileChunks
    .map((chunk, index) => ({
      fileHash: hash,
      chunkHash: `${hash}-${index}`,
      chunk,
    }))
    .filter(({ chunkHash }) => {
      // 同时过滤掉已经上传的切片
      return !existentChunksName.includes(`chunk-${chunkHash}`);
    })
    .map(({ fileHash, chunkHash, chunk }) => {
      const formData = new FormData();
      formData.append("fileHash", fileHash);
      formData.append("chunkHash", chunkHash);
      formData.append(`chunk-${chunkHash}`, chunk);
      return formData;
    });
}


export function getExistentChunks() {
  return axios.post(BASE_URL + "/existent-chunks");
}

后端逻辑

// 获取已经上传的切片接口
router.post("/existent-chunks", (ctx) => {
  if (!fs.existsSync(chunksDir)) {
    ctx.body = [];
    return;
  }
  ctx.body = fs.readdirSync(chunksDir).map((filename) => {
    return {
      // 切片名：chunk-tue234wdhfjksd211tyf3234-1
      filename,
      // 切片大小
      size: fs.statSync(`${chunksDir}/${filename}`).size,
    };
  });
});

最后

  • 多次尝试一个23MB的pdf和一个536MB的mp4，重复几次点暂停和继续，最后都可以打开
  • 如有问题，请不吝指教，学习一下

本文转载于:

https://juejin.cn/post/7317704519160528923

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

标签：const,--,return,切片,cue,试一下,chunks,hash,上传
From： https://www.cnblogs.com/smileZAZ/p/17935533.html

相关文章

  • 36 高效的VIVADO BlockDesign设计方法
    软件版本：VIVADO2021.1操作系统：WIN1064bit硬件平台：适用XILINXA7/K7/Z7/ZU/KU系列FPGA登录米联客(MiLianKe)FPGA社区-www.uisrc.com观看免费视频课程、在线答疑解惑！1概述由于VIVADO图形化的编程方式中大量应用，所以我们大部分时候都需要对IP进行图形化的封装，前面两节课实验，......
  • 2023年度评奖：电脑整机篇
    随着科技的飞速发展，笔记本已经成为我们日常生活和工作中不可或缺的一部分。为了表彰那些在设计和性能上表现出色的笔记本产品，快科技特别举办了这次笔记本年终评奖。本次评奖以创新性、实用性、性价比等为主要评选标准，力求呈现市场上最具代表性和影响力的笔记本产品。经过严格的......
  • docker中的mysql时区修改
    永久修改进入容器dockerexec-itmysql5.7bash查看当前时区date-R修改时区cp/usr/share/zoneinfo/PRC/etc/localtime#或者ln-sf/usr/share/zoneinfo/Asia/Shanghai/etc/localtime#退出exit#重启容器生效dockerrestartmysql5.7临时修改-重启失......
  • Java+SpringBoot+Maven+TestNG+httpclient+Allure+Jenkins实现接口自动化
    一、方案需求目标：测试左移，测试介入研发过程，验证单接口正常及异常逻辑选用工具：Java、SpringBoot、Maven、TestNG、httpclient、Allure、Jenkins方案：创建测试接口测试工程，参照研发设计文档和设计思路，编写正常及异常用例，直接调用服务端接口，覆盖接口逻辑和验证异常处理，提升接口健壮......
  • AnnotatedElement
    1、元素与注解的四种关系直接存在（directlypresent）直接存在或者直接引用。当一个注解直接在元素上引用时，则为直接引用，比如下面代码，@Configuration就是直接引用在类FilterConfig上间接存在（indirectlypresent）间接存在或间接引用。当一个注解A并没有注解引用在一个类E上......
  • 32 ADC模块FEP-DAQ7606采集显示波形方案
    软件版本：VIVADO2021.1操作系统：WIN1064bit硬件平台：适用XILINXA7/K7/Z7/ZU/KU系列FPGA登录米联客(MiLianKe)FPGA社区-www.uisrc.com观看免费视频课程、在线答疑解惑！1概述本方案通过把DAQ7606采集到的数据，通过前面已经完成的示波器显示驱动进行在屏幕上显示ADC采集的波形数......
  • Prometheus 14 点实践经验分享
    这是2017年的promcon的分享，原文地址在这里，作者JuliusVolz，今天偶然看到，虽然已经过去6年，有些实践经验还是非常值得学习。做个意译，加入一些自己的理解，分享给大家。埋点方面1.所有模块都要埋点我印象中Google有个规范，所有的服务模块，都需要通过HTTP /varz 接口暴露监......
  • C++17里面的读写锁（shared_lock读锁，unique_lock写锁）
    C++标准库本身没有直接提供读写锁，但C++11引入了一些工具，例如std::shared_mutex（C++14引入的，C++17之前的标准库中可能不支持）以及相关的读锁定（std::shared_lock）和写锁定（std::unique_lock）机制，用于实现读写锁的功能。下面是一个简单的示例，演示如何使用std::shared_mutex实现读写锁： ......
  • 33 ADC模块FEP-DAQ9248采集显示波形方案
    软件版本：VIVADO2021.1操作系统：WIN1064bit硬件平台：适用XILINXA7/K7/Z7/ZU/KU系列FPGA登录米联客(MiLianKe)FPGA社区-www.uisrc.com观看免费视频课程、在线答疑解惑！1概述本方案通过把DAQ9248采集到的数据，通过前面已经完成的示波器显示驱动进行在屏幕上显示ADC采集的波形数......
  • 【vue】,封装的table组件，table表格超出高度自适应滚动效果，设置页面全局统一自适应高度
    需求背景：为了使后台页面的table列表页面始终保持统一的高度，无论我们的列表数据有多少都只占一个屏幕的高度，如果table表格的数据太多，只滚动table表格的数据，页面高度保持不变；使用window.onresize监听浏览器的高度：//tableHeight:为el-table绑定的height高度；onMounted......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99