JS如何显示上传网速

admin

JS如何显示上传网速

在JavaScript中，没有直接的方式来获取上传或下载网络的速度，但是可以通过监听网络请求的发送和接收事件来估算网速。

以下是一个简单的示例，使用XMLHttpRequest来监听网络请求，并估算上传网速：

1. const uploadSpeedTest = (fileSize, timeToUpload) => {
   
2.   const bytesPerSecond = fileSize / timeToUpload; // 计算上传速度（字节/秒）
   
3.   const speed = (bytesPerSecond / 1024).toFixed(2); // 转换为KB/秒，并保留两位小数
   
4.   return `${speed} KB/s`; // 返回格式化的速度字符串
   
5. };
   
6. 
   
7. // 假设你有一个input元素用于文件上传
   
8. const input = document.getElementById('fileInput');
   
9. input.addEventListener('change', (e) => {
   
10.   const file = e.target.files[0];
    
11.   const startTime = performance.now(); // 请求开始时的性能时间
    
12.   const formData = new FormData();
    
13.   formData.append('file', file);
    
14. 
    
15.   const xhr = new XMLHttpRequest();
    
16.   xhr.open('POST', '/upload', true);
    
17. 
    
18.   xhr.upload.onprogress = (event) => {
    
19.     if (event.lengthComputable) {
    
20.       const elapsedTime = performance.now() - startTime; // 请求已经过的时间
    
21.       const uploadedBytes = event.loaded - event.total; // 已上传的字节数
    
22.       const uploadSpeed = uploadSpeedTest(uploadedBytes, elapsedTime);
    
23.       console.log(`已测量上传速度: ${uploadSpeed}`);
    
24.     }
    
25.   };
    
26. 
    
27.   xhr.send(formData);
    
28. });

复制代码

在这个示例中，当用户选择文件并触发change事件时，我们记录下开始时间。然后，当上传过程中有数据发送时，我们通过监听progress事件来计算已上传的字节数和已过的时间，并调用uploadSpeedTest函数来计算网速并输出到控制台。

需要注意的是，这个方法只能估算已上传数据的网速，并不能提供下载网速的信息。而且，由于performance.now()提供的时间精度较高，用于计算上传网速的精度也较高，但这种方法依赖于事件的触发频率和准确性，可能受到浏览器实现的限制。