引自免费微信小程序：皆我百晓生
要获取B/S架构中客户端到服务器的上行速率，我们可以使用JavaScript在浏览器端进行实时测量。由于transferTo方法是服务器操作，它不涉及网络传输速度的计算，因此我们需要在客户端计算。
首先，在前端，我们可以创建一个简单的HTML页面，包含一个文件选择按钮和一个显示上传进度的元素。这里是一个基本的HTML结构示例：
Upload Speed Test
Upload Speed Test
Upload speed: N/A
然后，在speed-test.js中，我们将实现文件上传并计算上行速率的功能：
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const loaded = event.loaded;
const total = event.total;
const speed = Math.round((loaded / 1024 / 1024) / ((event.loaded || event.position) / 1024 / 1024) * 100) / 100; // Mbps
document.getElementById('uploadSpeed').innerText = `Upload speed: ${speed.toFixed(2)} Mbps`;
}
};
xhr.onloadend = function() {
document.getElementById('uploadSpeed').innerText = 'Upload complete';
};
xhr.send(formData);
});
接下来，在后端，我们使用Spring Boot处理文件上传请求。首先，添加一个用于接收文件的控制器：
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
@RestController
public class UploadController {
@PostMapping("/upload")
public void handleFileUpload(@RequestParam("file") MultipartFile file) throws IOException {
Path targetPath = Paths.get("target/uploads", file.getOriginalFilename());
Files.write(targetPath, file.getBytes());
}
}
这个例子中，我们只是简单地将文件写入服务器本地磁盘。实际应用中，您可能需要根据需求对文件进行更复杂的处理，例如存储到云存储服务等。
这样，当用户选择文件并开始上传时，前端会实时更新上传速度到页面上。同时，文件也在后台被上传到服务器。这种方法可以更准确地反映从客户端到服务器的实际上行速率。注意，这仅适用于同一个局域网内的测试，因为不同网络环境下的速度可能会受到其他因素影响。
