在做前端上传时,会遇到上传大文件,大文件就要进行分片上传,我们整理下思路,实现一个分片上传,最终我们要拿到每一个分片的hash
值,index
分片索引,以及分片blob
,如下:
一、实现切片
index.html
: 我们先创建一个html
文件,用于处理选择文件,进而分片,这里利用spark-md5
获取文件hash值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件分片</title>
</head>
<body>
<input type="file" id="input"></input>
<script type="module">
import {
createChunk } from './main.js'
document.getElementById('input').onchange = event => {
let files = event.target.files
if (files.length) {
// 进行分片
createChunk(files[0])
}
}
</script>
</body>
</html>
main.js
: 默认一个分片5M,这里要向上取整,计算出分片数量
import SparkMD5 from 'https://esm.sh/spark-md5@3.0.2'
const CHUNK_SIZE = 1024 * 1024 * 5 // 分片大小5M
/**
* @description 进行分片
* @param {Object} file: 当前要处理的任务对象
*/
function createChunk(file) {
// 计算分片数量
let count = Math.ceil(file.size / CHUNK_SIZE)
console.log(count)
}
然后循环处理
/**
* @description 进行分片
* @param {Object} file: 当前要处理的任务对象
*/
function createChunk(file) {
// 计算分片数量
let count = Math.ceil(file.size / CHUNK_SIZE)
for (let i = 0; i < count; i++) {
// 分片
splitChunk(file, i, CHUNK_SIZE)
}
}
对文件进行切片,利用file.slice(start, end)
对文件进行切片处理
/**
* @description 切片
* @param {Object} file: file对象
* @param {Number} i: 当前处理的第几个任务
* @param {Number} size: 一个切片的大小
*/
function splitChunk(file, i, size) {
let start = i * size
let end = (i + 1) * si