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

(极速秒传)利用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();// 读取文件函数
const getFile = (path) => {return new Promise(resolve => {// 创建可读流const readStream = fs.createReadStream(path, {flags: 'r',encoding: 'base64',});var count = 0;var str = '';readStream.on('data', (data) => {  //监听str += datacount++})readStream.on('end', () => {   //读取结束resolve(str)})});
}

断点续传

断点续传就是在分片上传逻辑的基础上，增加断开后继续上传的逻辑

一种实现思路是：可以将分片的文件命名为对应的索引，在文件断开后，根据索引判断有多少分片已经上传成功了，然后继续传输没有上传成功的分片

在这里插入图片描述

附代码

前端：

bigUpFile(file)
/***********************样式与提示***********************/
// 大文件上传中
const bigFileLoading = ref(false)
const loadingTextArr = ref<string[]>([])const addText = (str: string, number: undefined | number = undefined, type = 'default') => {loadingTextArr.value.push(str)if (number || number === 0) {if (type === 'add') {progressNumber.value += number} else {progressNumber.value = number}}
}/***********************上传代码***********************/
// 开始函数
const bigUpFile = async (file: File) => {addText('大文件上传中...', 0)bigFileLoading.value = true// 1 获取文件的md5addText('获取文件md5...', 5)const fileMD5 = await getMd5(file) // md5// 2. 极速秒传addText('判断是否可以进行极速秒传...', 10)let upEnd = await fastUpFile(file, fileMD5)if (upEnd) {addText('极速秒传成功！', 100)message.success('极速秒传成功！')emit("getList");return}addText('开始分割文件...', 15)// 3. 切割文件let fileChunkList = await getFileList(file)let fileNumber = fileChunkList.length // 文件分段总数addText('校验断点续传...', 18)// 4. 校验大文件分片上传文件数量let execFileList = await getExecFileList(fileMD5)if (execFileList && execFileList?.length) {let fl: FileList[] = []fileChunkList.forEach(item => {if (!execFileList.includes(item.index) && !execFileList.includes(item.index + '')) {fl.push(item)}})fileChunkList = fladdText('校验断点续传成功，继续传输...', 18)}addText('开始上传文件...', 20)// 5. 开始上传任务await createUpBigFile(fileChunkList, fileMD5, file.name, fileNumber)addText('结束...', 100)
}/**********************************************/// 1 获取文件的md5
const getMd5 = async (file: File | Blob) => {let buffer = await file.text(); // 获取bufferreturn SparkMD5.hashBinary(buffer);
}// 2. 极速秒传
const fastUpFile = async (file: File, fileMD5: string) => {// 发送md5到服务器判断是否已经存在const res = await api.upPage.execFile({md5: fileMD5});// md5已存在，更新标签if (res) {await api.upPage.updateMD5({md5: fileMD5,name: formState.name,})// 极速秒传成功return true}
}// 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
}// 4. 校验大文件分片上传文件数量
const getExecFileList = async (fileMD5: string): Promise<string | number[]> => {let res = await api.upPage.execFileList({md5: fileMD5});console.log('res', res)return res
}// 5. 开始上传任务
const createUpBigFile = async (fileList: any[], fileMD5: string, fileName: string, fileNumber: number) => {console.log('---fileList', fileList)let promiseList: any[] = []fileList.forEach(async (item, i) => {promiseList.push(up(item.chunk, item.index, fileMD5))})let num = Math.floor(70 / promiseList.length)promiseList.forEach(p => p.then(res => {addText('上传成功1个分片...', num, 'add')return res}))await Promise.all(promiseList)// 5.2 合并文件await mergeFile(fileMD5, fileNumber, fileName, fileList)
}// 5.1 上传
const up = async (file, i, fileMD5) => {let formData = new FormData();formData.append("fileName", fileMD5);formData.append("fileIndex", `${i}`);formData.append("file", file);let res = await api.upPage.saveBigFile(formData);
}// 5.2 合并文件
const mergeFile = async (fileMD5: string, fileNumber: number, fileName: string, fileList: any[]) => {addText('合并文件中...', 90)let res = await api.upPage.mergeFile({fileNumber,md5: fileMD5,name: formState.name,fileName,});console.log('res', res)if (res.type === 'add') {let indexList = res.fileListlet fl: any[] = []fileList.forEach(item => {if (!indexList.includes(item.index) && !indexList.includes(item.index + '')) {fl.push(item)}})createUpBigFile(fl, fileMD5, fileName, fileNumber)}
}

nodejs

const filePath = path.join(__dirname, './static') // 文件上传后保存的路径// 方法函数：添加文件到服务器
const addFileToServer = (file, filePath) => {// 转成文件流var _file = fs.createReadStream(file.filepath)// 存储文件_file.pipe(fs.createWriteStream(filePath))
}// 方法函数：获取文件可读流
const getFile = (path) => {return new Promise(resolve => {const readStream = fs.createReadStream(path, {flags: 'r',encoding: 'base64',});var count = 0;var str = '';readStream.on('data', (data) => {  //监听str += datacount++})readStream.on('end', () => {   //读取结束resolve(str)})});
}// 返回参数格式化
cosnt sendVal = (val) => return {...,val}/*************************************************************************/
// 校验大文件分片上传文件数量
router.post('/execFileList', async (req, res) => {const data = getReq(req) // 获取传参try {// 文件路径let dirPath = path.join(filePath, data.md5)// 判断是否有该文件夹if (fs.existsSync(dirPath)) {// 列出文件夹中文件名称const filesName = fs.readdirSync(dirPath);return res.send(sendVal(filesName))} else {return res.send(sendVal(false))}} catch (error) {return res.send(sendErr(error))}
})// 大文件上传
router.post('/saveBigFile', async (req, res) => {try {var form = new formidable.IncomingForm();form.encoding = 'utf-8';form.keepExtensions = true;//保留后缀form.parse(req, async (err, fields, files) => {if (err) {return res.send(sendErr(err))}let _filePath = path.join(filePath, fields.fileName)createPath(_filePath) // 如果没有该路径，创建路径// 添加文件到服务器addFileToServer(files.file, `${_filePath}/${fields.fileIndex}`)return res.send(sendVal(1))})} catch (error) {return res.send(sendErr(error))}
})// 大文件合并
router.post('/mergeFile', async (req, res) => {const data = getReq(req) // 获取参数// 字段校验let field = fieldVerification({md5: 'string',name: 'string',fileName: 'string',fileNumber: 'number'}, data)if (field) return res.send(sendErr(3, field))// 登陆权限校验+获取用户信息const userInfo = validateErr(req, "imgUp")if (typeof (userInfo) !== 'object') return res.send(sendErr(userInfo))try {// 获取后缀let extensions = data.fileName.replace(/^.*(\..*?)$/, '$1')// 文件路径let dirPath = path.join(filePath, data.md5)let fileName = path.join(filePath, `${data.md5}${extensions}`)const filesName = fs.readdirSync(dirPath);// 校验文件完整性if (filesName?.length !== data.fileNumber) {return res.send(sendVal({fileList: filesName,type: 'add'}))}// 创建合并流let writeStream = fs.createWriteStream(fileName, {flags: 'w+',encoding: 'base64',})writeStream.on('finish', async () => {console.log('成功');await addFileToSQL(data.md5, data.name, data.fileName, extensions, true)res.send(sendVal({type: 'success'}))})// 合并文件for (let i = 0; i < filesName.length; i++) {let _filePath = path.join(dirPath, `${i}`)// 读取文件let val = await getFile(_filePath)// 写入文件writeStream.write(val)}writeStream.end();} catch (error) {return res.send(sendErr(error))}
})