vue+nestjs大文件分片上传

<template>
    <div class="hello">
        <input type="file" id="file" @change="getFile" />
        <input type="button" id="upload" value="上传" @click="uploadFile" />
        <input type="button" id="continue" value="继续上传" @click="continueUpload" />
    </div>
</template>

const getFile = async (event) => {
    const file = event.target.files[0];
    fileRef.value = file;
};

import SparkMD5 from 'spark-md5';
const getFileHash = (file) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = function (e) {
            const fileMd5 = SparkMD5.ArrayBuffer.hash(e.target.result);
            resolve(fileMd5);
        };
        fileReader.onerror = function (err) {
            reject(err);
        };
        fileReader.readAsArrayBuffer(file);
    });
};

const createChunks = async (file, chunkSize = 1024 * 1024 * 1) => {
    const chunks = [];
    let index = 0; //分片索引
    let start = 0; //分片开始位置
    while (start < file.size) {
        const blob = file.slice(start, Math.min(start + chunkSize, file.size));
        chunks.push({
            blob: blob,
            uploaded: false, // 分片是否上传
            chunkIndex: index, // 分片序号
        });

        index++;
        start += chunkSize;
    }

    fileChunks.value = chunks;
    return chunks;
};

const uploadEvent = (chunk) => {
    let fd = new FormData();
    fd.append('file', chunk.blob);
    fd.append('chunkIndex', chunk.chunkIndex);
    fd.append('fileHash', fileHash.value);
    return axios.post(
        'http://localhost:4000/admin/sys/log/file/upload',
        fd,
        {
            headers: {
            'Content-Type': 'multipart/form-data',
            },
        }
    );
};

    const limitFetch = async (chunks, count = 10) => {
        let runningCount = 0; // 正在执行的任务数
        const run = () => {
            while (chunks.length > 0 && runningCount < count) {
                const chunk = chunks.shift();
                uploadEvent(chunk)
                .then(() => {
                    chunk.uploaded = true;
                })
                .finally(() => {
                    runningCount--;
                    run();
                });
                runningCount++;
            }
        };
        run();
    };

const mergeFile = (fileHash, fileName) => {
    return axios.post(
        'http://localhost:4000/admin/sys/log/file/merge',
        {
           fileHash,
           fileName
        }
    );
};

    const uploadFile = async () => {
        Promise.all([
            getFileHash(fileRef.value),
            createChunks(fileRef.value),
        ]).then(async (data) => {
            const [hashId, chunks] = data;
            fileHash.value = hashId;
            await limitFetch(chunks);
            await mergeFile(fileHash.value, fileRef.value.name);
        })
        .catch((err) => {
            console.error('获取文件哈希或分片失败:', err);
        });
    };

const continueUpload = async () => {
    if (fileChunks.value.length == 0 || !fileHash.value) {
        return;
    }

    try {
        await uploadEvent(
            fileChunks.value.filter((chunk) => !chunk.uploaded)
        );
        await mergeFile(fileHash.value, fileRef.value.name);
    } catch (err) {
        return {
            mag: '文件上传错误',
            success: false,
        };
    }
};

 // 上传文件
 @Post('file/upload')
 @UseInterceptors(FileInterceptor('file')) //指定接收前端formData的file字段
 async uploadFile(
     @UploadedFile() file: Express.Multer.File,
     @Body() dto: FileInfoDto,
 ) {
     // 获取文件路径
     const tempPath = join(process.cwd(), 'uploads', `${dto.fileHash}`);
     try {
         // console.log('文件已经存在’)
         await fs.access(tempPath);
     } catch (e) {
         // 文件夹不存在，创建文件夹
         await fs.mkdir(tempPath, { recursive: true });
     }
     const tempChunkPath = join(tempPath, `${dto.chunkIndex}`);
     try {
         await fs.access(tempChunkPath);
     } catch (e) {
         await fs.writeFile(tempChunkPath, file.buffer);
     }
     return { code: 0, data: dto.chunkHash + '上传成功' };
 }

@Post('file/merge')
@Authorize()
async mergeFile(@Body() dto: { fileHash: string; fileName: string }) {
  // 最终合并的文件路径
  const filePath = join(process.cwd(),'uploads',`${dto.fileHash}${extname(dto.fileName)}`);

  // 获取临时文件夹路径
  const tempPath = join(process.cwd(), 'uploads', `${dto.fileHash}`);
  // 拿到文件夹内容
  const chunkPaths = await fs.readdir(tempPath);

  let i = 0;
  while (i < chunkPaths.length) {
      const chunkPath = join(tempPath, i + '');
      const chunk = await fs.readFile(chunkPath); // 读取分片内容
      await fs.appendFile(filePath, chunk); // 将内容合并到最终文件内
      await fs.unlink(chunkPath); // 删除已经读取的分片文件
      i++;
  }

  await fs.rm(tempPath, { recursive: true, force: true }); // 删除临时文件夹路径

  return { code: 0, message: '文件合并成功' };
}