SpringBoot整合华为云OBS,怎么给前端返回上传进度?

SpringBoot整合华为云OBS,将上传进度返回给前端呢?
官方文档上的回答,有些看不懂,好像只能在后端打印,怎么实时的返回给前端呢?

img

该回答引用GPTᴼᴾᴱᴺᴬᴵ
您可以在SpringBoot的后端控制器中使用WebSocket或SSE等技术将上传进度实时返回给前端页面。具体做法如下:

1.在后端控制器中定义WebSocket或SSE连接的endpoint,如下:

@Controller
public class UploadController {

    @Autowired
    private SimpMessagingTemplate messagingTemplate;

    @MessageMapping("/uploadProgress")
    public void progress(@Payload ProgressMessage message) {
        messagingTemplate.convertAndSend("/topic/uploadProgress", message);
    }
}


2.在上传进度监听器中发送进度信息到指定的endpoint,如下:

ProgressListener progressListener = new ProgressListener() {
    @Override
    public void progressChanged(ProgressStatus status) {
        // 获取上传平均速率
        System.out.println("Average speed: " + status.getAverageSpeed());
        // 获取上传进度百分比
        System.out.println("Transfer percentage: " + status.getTransferPercentage());

        // 发送进度信息到WebSocket或SSE endpoint
        ProgressMessage message = new ProgressMessage(status.getTransferPercentage());
        String url = "/app/uploadProgress";
        messagingTemplate.convertAndSend(url, message);
    }
};


其中,ProgressMessage是一个自定义的类,用于封装上传进度信息:

public class ProgressMessage {
    private int percentage;

    public ProgressMessage(int percentage) {
        this.percentage = percentage;
    }

    public int getPercentage() {
        return percentage;
    }

    public void setPercentage(int percentage) {
        this.percentage = percentage;
    }
}


3.在前端页面中,使用JavaScript连接到WebSocket或SSE endpoint,接收实时的上传进度信息,并更新页面显示,如下:

var socket = new SockJS('/uploadProgress');
var stompClient = Stomp.over(socket);

stompClient.connect({}, function(frame) {
    stompClient.subscribe('/topic/uploadProgress', function(message) {
        var progress = JSON.parse(message.body).percentage;
        $('#progressBar').css('width', progress + '%');
    });
});


其中,#progressBar是前端页面中进度条的id。

以上是一种基于WebSocket或SSE的实时上传进度更新方案,您可以根据自己的需求和技术栈选择适合的方案。

文档的意思是让你定义一个 listener 事件,当进度改变的时候通知你

不知道你这个问题是否已经解决, 如果还没有解决的话:

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^