说这个之前，需要对上一篇文章进行一个回顾文件上传之大文件分块上传-CSDN博客

如果我们要对文件进行一个进度的控制，我们可以在upload接口上进行一些操作。

服务器端：

在上一篇，我们已经获取到totalChunks：也就是分块的总块数 

                                  以及  currentChunk：当前块的下标索引

那么我们可以将upload接口原先的

chunkStream.on("end", () => {
    fs.unlinkSync(file.path); //读取文件块的流结束后，删除临时文件
    res.sendStatus(200); //响应上传成功的状态
});

替换成：

chunkStream.on("end", () => {
    fs.unlinkSync(file.path); //读取文件块的流结束后，删除临时文件
    const progress = ((currentChunk + 1) / totalChunks) * 100;  //计算出上传进度的百分比
    res.json({ progress }); //相应上传成功的状态
});

当我们进行文件上传时,以下则是打印出的progress

服务器端已经修改完毕，那么客户端应该如何去接收和使用呢？

客户端：

首先，在页面上我们要去写一个进度条

<progress
    value="0"
    max="100"
    id="progress"
></progress>

那么在前端接口哪里进行返回数据的一个操作

try{
    const res = await axios.post('http://localhost:3000/upload',formData,{
        headers:{
            'Content-Type':'multipart/form-data',
        },
    }); //发送当前块的上传请求

    const { progress } = res.data; //获取当前块的上传进度
    document.getElementById('progress').value = progress; //更新进度
}catch(error){
    console.error(error);
    return;
}

那么以上操作就可以完成进度条的一个操作了。