阿里云OSS上传文件时,如何显示上传网速

最新推荐文章于 2023-07-18 15:01:31 发布

[咖啡加冰]

最新推荐文章于 2023-07-18 15:01:31 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript Electron 文章标签：阿里云 js

本文链接：https://blog.csdn.net/u014705309/article/details/103955531

版权

在用户上传文件至阿里云OSS时，为了解决因速度慢或大文件上传进度不明显导致的用户困惑，本文介绍了通过Electron、Node.js尝试以及最终采用JS手动实现的方法来显示上传网速。手动实现的关键是记录每次上传的字节数，并利用定时器每秒计算过去1000ms的平均传输速率。

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

阿里云OSS上传文件时,如何显示上传网速

业务场景

用户上传时,网速很慢,或者在上传大文件时,虽然有进度条,但是动的很慢,或者不明显,用户会产生困惑.
所以就产生了一个显示网速的需求点.

实现方式

Electron

因为我们的产品形态是Electron客户端,所以自然就想到了从Electron入手
但找过了几个对象:app net net-log
发现都没有直接拿到网速的地方

Node.js

找了process对象,这里面我找到了memoryUsage和cpuUsage方法,也没有找到网络相关的,最多就是一个查询网卡的,但也解决不了我的问题

JS手动实现

最终我是手动实现了这个功能,思路是将过去每一次上传的文件,均摊到每ms中,再遍历求和得出1000ms中传输的总字节数.因为上传本身是异步,多线程并行的,所以只计算单个得到结果很明显不准确.

具体代码

声明记录传输信息的对象

let map = {
   }; //定义一个map对象,用来存放每一ms的数据量, key: 毫秒 value: 字节数,示例: 1578648506560: 50
let map_max_key = 0;// 当前map中最大的key
const change = async (i, value) => {
   
    map[i] = value;
    map_max_key = i
};

上传阿里云OSS的方法

参考了阿里云OSS的GitHub文档OSS.README.md中的分片上传部分的参数说明(progress部分)

/**
 * 上传文件至阿里云
 * @param _objName
 * @param _file
 * @returns 0-成功 1-失败 2-取消
 */
async function uploadFile(_objName, _file) {
   
    let logFlag = false;//是否进行日志记录的标记位
    //main.log,main.old.log,task.log这3个文件本身就是
    if (_file.indexOf('main.log') === -1 && _file.indexOf('main.old.log') === -1 && _file.indexOf('task.log') === -1) {
   
        logFlag = true;
    }

    /**
     * 处理分片上传的参数
     * @param res 上传的返回信息
     * @param partSize 分片的大小
     */
    function handle_network_speed(res, partSize) {
   
        const spend_time = res.rt;//单位ms
        const end_time = new Date(res.headers.date).getTime();
        const start_time = end_time - spend_time;
        let<