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

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 使用moviepy库视频合并时出错
  • ¥30 FLUENT液固传质UDF
  • ¥15 怎么看梯度直方图以,怎么判断梯度消失/爆炸,怎么解决
  • ¥15 aspnetdll文件访问拒绝
  • ¥15 wpf中在模版中寻找元素
  • ¥15 MFC平台生成指定圆
  • ¥15 jmeter出现403
  • ¥500 求华为P30PRO手机硬盘数据恢复
  • ¥15 关于#vscode#的问题:ESP32开发板对接MQTT实现小灯泡的开关