大文件分块上传进度控制处理

最新推荐文章于 2024-07-26 15:05:55 发布

开心点啦.

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量470

点赞数 11

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/zxcvb0825/article/details/135841868

版权

本文介绍了如何在文件上传过程中，通过服务器端修改代码来实时反馈上传进度给客户端，以及客户端如何接收并更新进度条的技术细节，主要涉及HTTP请求、multipart/form-data和axios库的使用。

摘要由CSDN通过智能技术生成

说这个之前，需要对上一篇文章进行一个回顾文件上传之大文件分块上传-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;
}

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