zzbert 2023-03-17 11:25 采纳率: 100%
浏览 29
已结题

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

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

img

  • 写回答

3条回答 默认 最新

  • MarkHan_ 2023-03-17 11:44
    关注

    该回答引用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的实时上传进度更新方案,您可以根据自己的需求和技术栈选择适合的方案。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月25日
  • 已采纳回答 3月17日
  • 创建了问题 3月17日

悬赏问题

  • ¥15 手机淘宝抓清除消息接口
  • ¥15 C#无selenium
  • ¥15 LD衰减计算的结果过大
  • ¥15 用机器学习方法帮助保险公司预测哪些是欺诈行为
  • ¥15 计算300m以内的LD衰减
  • ¥15 数据爬取,python
  • ¥15 怎么看 cst中一个面的功率分布图,请说明详细步骤。类似下图
  • ¥15 为什么我的pycharm无法用pyqt6的QtWebEngine
  • ¥15 FOR循环语句显示查询超过300S错误怎么办
  • ¥15 数电设计题 没有设计思路 不知道用什么芯片进行设计 求提供设计思路