js文件上传分片上传/断点续传/极速秒传

寻ing

已于 2024-01-02 15:37:51 修改

阅读量1.4k

点赞数 8

分类专栏： nodejs JS 文章标签： javascript 开发语言 ecmascript 前端

于 2024-01-02 15:26:11 首次发布

本文链接：https://blog.youkuaiyun.com/block_xu/article/details/135341960

版权

文章介绍了如何使用MD5进行文件上传的优化，包括利用MD5进行预检查以避免重复上传，以及通过分片上传和断点续传提高上传速度和稳定性。还提供了JavaScript和Node.js的实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(极速秒传)利用md5判断上传的文件是否存在

MD5信息摘要算法，一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。

每一个文件都会生成一个不同的md5编码例：【3a94b8ca53dea8524d16c4e39dd43a69】

优点

服务器中不会出现重复文件

极速秒传

传输文件先校验md5，减小服务器压力

思路是
在文件上传到服务器前，将文件进行MD5转换，然后将转换完后的MD5码传给服务器，服务器判断当前MD5码是否存在，如果存在就代表着服务器上已经有了跟该文件相同的文件，不再需要上传文件

在这里插入图片描述

// 获取md5
import SparkMD5 from 'spark-md5';

const getMd5 = async (file: File) => {
    let text = await file.text(); // 将文件转换成text文本
    return SparkMD5.hashBinary(text); // 通过插件进行MD5加密
}

分片上传

分片上传就是把一个大文件，按照一定的大小，分割成多个小文件分别进行上传，文件上传结束后，服务器对所有的文件进行合并（前端负责拆分、后端负责整合）

在这里插入图片描述

优点（分片上传/断点续传）

上传速度快

上传稳定性强

降低传输断开风险

前端拆分文件的方法

前端拿到【file】文件后，可以调用file.slice方法（Blob的方法）对文件进行拆分

在这里插入图片描述

const BIGSIZE = 1024 * 1024 * 2 // 2mb

// 3. 切割文件
const getFileList = (file: File): FileList[] => {
    let cur = 0; // 当前分割到的位置
    const fileChunkList: any[] = [] // 最终的blob数组
    while (cur < file.size) {
        let chunk = file.slice(cur, cur + BIGSIZE)
        fileChunkList.push({
            chunk: chunk,
            index: fileChunkList.length
        })
        cur += BIGSIZE;
    }
    return fileChunkList
}

服务器合并文件的方法（node示例）

filesNameList = ['分片文件a','分片文件b',...] // 文件路径
// 创建可写流
let writeStream = fs.createWriteStream('最终合并后的文件路径', {
  flags: 'w+',
  encoding: 'base64',
})
// 合并文件
for (let i = 0; i < filesName.length; i++) {
  // 读取文件
  let val = await getFile(filesNameList[i])
  // 写入文件
  writeStream.write(val)
}
writeStream.end();