完整教程:Java+Vue+Websocket实现OSS文件上传进度条功能

这篇具有很好参考价值的文章主要介绍了完整教程:Java+Vue+Websocket实现OSS文件上传进度条功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引言

文件上传是Web应用开发中常见的需求之一,而实时显示文件上传的进度条可以提升用户体验。本教程将介绍如何使用Java后端和Vue前端实现文件上传进度条功能,借助阿里云的OSS服务进行文件上传。

技术栈

  • 后端:Java、Spring Boot 、WebSocket Server
  • 前端:Vue、WebSocket Client

前端实现

安装依赖

npm install websocket sockjs-client

UploadFiles文件上传组件

注意:异步请求接口的时候,后端返回数据结构如下,实际根据自己需求调整返回。

{
    "code": 200,
    "message": "成功",
    "data": {
        "requestId": "file_1697165869563",
    }
}

创建UploadFiles组件,前端主业务逻辑:上传文件方法和初始化websocket服务方法。这里requestId也是上传文件到OSS的Bucket桶后的文件名,后面Java后端展示逻辑的时候有显示,这里我服务端的端口是8886。实际根据自己需求调整。需要注意的是,后端服务程序启动的时候,端口号是与websocket服务共用的,websocket服务不需要额外设置端口号。

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <button @click="uploadFile">上传</button>
    <div>{{ progress }}</div>
  </div>
</template>

<script>
  import axios from 'axios';
  import { Message } from 'element-ui';
  import { w3cwebsocket as WebSocket } from 'websocket';

  export default {
    data() {
      return {
        file: null,
        progress: '0%',
        requestId: '',
        websocket: null,
        isWebSocketInitialized: false,
      };
    },
    methods: {
      handleFileChange(event) {
        this.file = event.target.files[0];
      },
      initConnect(){
        if (!this.isWebSocketInitialized) {
          this.initWebSocket();
          this.isWebSocketInitialized = true;
        }
      },
      generateUniqueID() {
        // 使用时间戳来生成唯一ID
        const timestamp = new Date().getTime();
        // 在ID前面添加一个前缀,以防止与其他ID冲突
        const uniqueID = 'file_' + timestamp;
        return uniqueID;
      },
      uploadFile() {
        this.initConnect();
        console.log("isWebSocketInitialized="+this.isWebSocketInitialized)
        const formData = new FormData();
        formData.append('file', this.file);
        formData.append('requestId', this.generateUniqueID());
        axios
          .post('http://localhost:8886/test/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
            onUploadProgress: (progressEvent) => {
              this.progress = `${Math.round((progressEvent.loaded * 100) / progressEvent.total)}%`;
            },
          })
          .then((response) => {
            if(response.data.code===200){
              this.requestId = response.data.data.requestId;
              console.log('requestId=' + response.data.data.requestId);
            }else{
              // 弹框报错 response.data.message
              console.log("code="+response.data.code+",message="+response.data.message)
              Message.error(response.data.message);
            }
            this.initWebSocket();
          })
          .catch((error) => {
            console.error('Failed to upload file:', error);
          });
      },
      initWebSocket() {
        this.websocket = new WebSocket('ws://localhost:8886/test/upload-progress');
        this.websocket.onmessage = (event) => {
          const progress = event.data;
          console.log('上传进度=' + progress);
          this.progress = progress;
          // if (progress === '100%') {
          //   this.websocket.close();
          // }
        };
        this.websocket.onclose = () => {
          console.log('WebSocket connection closed');
        };
      },
    },
  };
</script>

使用上传组件

测试演示,所以直接在App.vue中使用UploadFiles组件。

<template>
  <div id="app">
    <UploadFiles />
  </div>
</template>

<script>
import UploadFiles from './components/UploadFiles.vue';

export default {
  name: 'App',
  components: {
    UploadFiles
  }
};
</script>

后端实现

添加依赖

maven中添加socket服务依赖

<!--websocket服务-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketConfig配置类

创建WebSocket配置类,配置socket服务注册节点、处理跨域问题和添加监听处理器。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.lang.Nullable;
import org.springframework.scheduling.TaskScheduler;
import org.springframework.scheduling.concurrent.ThreadPoolTaskScheduler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    private final UploadProgressHandler uploadProgressHandler;

    public WebSocketConfig(UploadProgressHandler uploadProgressHandler) {
        this.uploadProgressHandler = uploadProgressHandler;
    }
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(uploadProgressHandler, "/test/upload-progress").setAllowedOrigins("*").addInterceptors(new HttpSessionHandshakeInterceptor());
    }

    /**
     * 引入定时任务bean,防止和项目中quartz定时依赖冲突
     */
    @Bean
    @Nullable
    public TaskScheduler taskScheduler() {
        ThreadPoolTaskScheduler threadPoolScheduler = new ThreadPoolTaskScheduler();
        threadPoolScheduler.setThreadNamePrefix("SockJS-");
        threadPoolScheduler.setPoolSize(Runtime.getRuntime().availableProcessors());
        threadPoolScheduler.setRemoveOnCancelPolicy(true);
        return threadPoolScheduler;
    }

}

UploadProgressHandler处理器

创建文件上传进程的处理器,继承TextWebSocketHandler,记录文件上传监听器和记录WebSocketSession会话。

import xxxxxx.PutObjectProgressListener;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Component
public class UploadProgressHandler extends TextWebSocketHandler {

    private final Map<String, PutObjectProgressListener> uploadProgressMap = new ConcurrentHashMap<>();
    private static final Map<String, WebSocketSession> sessionMap = new ConcurrentHashMap<>();

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) {
        uploadProgressMap.forEach((requestId, progressListener) -> {
            try {
                session.sendMessage(new TextMessage(progressListener.getProgress()));
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception{
        sessionMap.put(session.getId(), session);
        super.afterConnectionEstablished(session);

    }
    public static Map<String, WebSocketSession> getSessionMap() {
        return sessionMap;
    }
    public void addProgressListener(String requestId, PutObjectProgressListener progressListener) {
        uploadProgressMap.put(requestId, progressListener);
    }
    public void removeProgressListener(String requestId) {
        uploadProgressMap.remove(requestId);
    }
}

PutObjectProgressListener文件上传监听器

创建文件上传监听器,监听文件上传的进度,并且同步到socket通信会话中

import com.aliyun.oss.event.ProgressEvent;
import com.aliyun.oss.event.ProgressListener;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;

import java.io.IOException;

/**
 * 重写上传文件监听器
 * @author yangz
 * @date 2023/10/11
 */
public class PutObjectProgressListener implements ProgressListener {

    private final long fileSize;
    private long bytesWritten = 0;
    private WebSocketSession session;

    public PutObjectProgressListener(WebSocketSession session, long fileSize) {
        this.session = session;
        this.fileSize = fileSize;
    }

    public String getProgress() {
        if (fileSize > 0) {
            int percentage = (int) (bytesWritten * 100.0 / fileSize);
            return percentage + "%";
        }
        return "0%";
    }

    @Override
    public void progressChanged(ProgressEvent progressEvent) {
        bytesWritten += progressEvent.getBytes();
        if (fileSize > 0) {
            int percentage = (int) (bytesWritten * 100.0 / fileSize);
            try {
                if (session.isOpen()) {
                    session.sendMessage(new TextMessage(percentage + "%"));
                    System.out.println("上传进度="+percentage + "%");
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

OSSUtil工具类

创建文件上传工具类

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.*;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.socket.WebSocketSession;
import java.io.*;
import java.util.*;
@Slf4j
public class OSSUtil {
    public static final String endpoint = "http://xxxxx.aliyuncs.com";
    public static final String accessKeyId = "yourAccessKeyId";
    public static final String accessKeySecret = "yourAccessKeySecret";
    private static final String bucketName = yourBucketName;
   
    /**
     * 文件上传并监听进度
     * @param file,requestId,session
     * @return {@link String }
     * @author yangz
     * @date 2023/10/11
     */
    public static String uploadFile(MultipartFile file, String requestId, WebSocketSession session) throws IOException {
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        // 获取文件大小
        long fileSize = file.getSize();
        String originalFilename = file.getOriginalFilename();
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, requestId+originalFilename.substring(originalFilename.lastIndexOf(".")), file.getInputStream());
        // 文件上传请求附加监听器
        putObjectRequest.setProgressListener(new PutObjectProgressListener(session,fileSize));
        ossClient.putObject(putObjectRequest);
        ossClient.shutdown();
        return requestId;
    }
}   

Controller控制器

创建一个测试Controller,API测试文件上传和监听进度

import xxxxxx.UploadProgressHandler;
import xxxxxx.BusinessException;
import xxxxxx.OSSUtil;
import xxxxxx.PutObjectProgressListener;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.socket.*;
import java.io.IOException;
import java.util.*;

@RestController
@Slf4j
@RequestMapping("/test")
public class TestController {
 @Autowired
    private UploadProgressHandler uploadProgressHandler;

    /**
     * 文件上传并监听进度
     * @param file
     * @param requestId
     * @return {@link Map }<{@link String }, {@link String }>
     * @author yangz
     * @date 2023/10/12
     */
    @PostMapping("/upload")
    public Map<String, String> uploadFile(@RequestParam("file") MultipartFile file, String requestId) throws IOException {
        //获取处理器监听到的WebSocketSession集合
        Map<String, WebSocketSession> sessionMap = UploadProgressHandler.getSessionMap();
        Collection<WebSocketSession> sessions = sessionMap.values();
        List<WebSocketSession> values = new ArrayList<>(sessions);
        int size = values.size();
        if (size<1){
            throw new BusinessException(500,"Websocket服务未连接!");
        }
        // 关闭除最后一个之外的其他WebSocketSession
        for (int i = 0; i < size - 1; i++) {
            WebSocketSession session = values.get(i);
            session.close();
            sessionMap.remove(session.getId());
        }
        WebSocketSession webSocketSession = values.get(size-1);
        //添加websocket服务监听文件上传进程
        PutObjectProgressListener progressListener = new PutObjectProgressListener(webSocketSession, file.getSize());
        uploadProgressHandler.addProgressListener(requestId, progressListener);
        // 将 WebSocketSession 传递给 OSSUtil.uploadFile方法
        OSSUtil.uploadFile(file, requestId, webSocketSession);
        //上传完成,移除websocket服务监听
        uploadProgressHandler.removeProgressListener(requestId);

        Map<String, String> resultMap = new HashMap<>();
        resultMap.put("requestId", requestId);
        return resultMap;
    }
}

结果展示

步骤:1、选择文件。2、点击上传按钮。3、可以看到进度标签实时展示百分比进度
websocket 上传文件,Java,java,vue.js,websocket

结语

通过以上步骤,我们实现了一个包含上传文件和实时显示上传进度的文件上传功能。前端使用Vue编写了上传组件,后端使用Java和Spring Boot进行文件上传处理。通过调用阿里云OSS服务和监听上传文件字节来计算进度,我们能够实时显示文件上传的进度条,提升用户体验。

结束语:人生最大的浪费不是金钱的浪费,而是时间的浪费、认知的迟到文章来源地址https://www.toymoban.com/news/detail-751952.html

到了这里,关于完整教程:Java+Vue+Websocket实现OSS文件上传进度条功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot整合Minio + vue 实现文件分片上传(完整代码)

    网上关于minio分片上传的资料不太详细,缺斤少两,所以我基于他们的代码做了一些修改,demo能够正常运行起来,但是偶尔也会发生一些小bug,不过这些都无伤大雅,最终目的是理解代码背后的逻辑和流程 流程: 前端获取生成文件MD5,发送至后台判断是否有该文件缓存,有

    2024年02月02日
    浏览(54)
  • vue+iviewUi+oss直传阿里云上传文件

    用户获取oss配置信息将文件上传到阿里云,保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss,轻量型的应用可以直接将文件资源上传到服务器就行。废话不多说,下面开始总结本人上传到oss的踩坑之旅。 1、第一

    2024年02月13日
    浏览(48)
  • vue项目中上传文件到阿里云oss方法

    在项目需求中,关于图片、视频、文件等上传文件,一般不是直接放置在自己的后台服务器上,一般都会购买云服务进行存储。譬如阿里云的oss对象存储。 那么,前端开发项目中,涉及到上传的功能时,我们不是把文件上传到自己的后台服务器,而是阿里云上面去,然后拿到

    2024年02月06日
    浏览(61)
  • Vue3 - 超详细 “纯前端“ 将文件上传到阿里云 OSS 对象存储,最新阿里云 SDK 上传音频、视频、图片、文档、office 等(保姆级详细示例源码教程,每行代码都有注释小白一看就懂)

    网上的教程大部分都过时了,各种不规范的写法五花八门(各种文件引入关系贼难改),对于新手来说真的无从下手。 本文站在新手的角度, 在 vue3 项目开发中,超详细 “纯前端(无需后端)” 上传各种图片图像、文档、音视频文件、压缩包到阿里云oss存储,利用 SDK 前端

    2024年02月03日
    浏览(52)
  • Java 使用OSS 文件上传+下载 简单入门

    官方SDK文档:Java对象/文件_对象存储-阿里云帮助中心           阿里云对象存储OSS(Object Storage Service)为您提供基于网络的数据存取服务。使用OSS,可以通过网络随时存储和调用包括文本、图片、音视频在内的各类数据文件;可以通过OSS控制台创建Bucket,并将文件上传

    2024年02月10日
    浏览(46)
  • 用Aspose-Java免费实现 PDF、Word、Excel、Word互相转换并将转换过得文件上传OSS,返回转换后的文件路径

    github代码地址 https://github.com/Tom-shushu/work-study 接口文档有道云 https://note.youdao.com/s/GShGsYE8 接口文档离线版本 https://files.cnblogs.com/files/Tom-shushu/%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3.rar?t=1682958343download=true 为什么发布这篇文档转换的文章呢?因为上周我要将一个PDF转换为Word,结果百度谷歌

    2024年02月02日
    浏览(57)
  • SpringCloud整合阿里云OSS实现文件上传

    阿里云OSS官网:OSS管理控制台 (aliyun.com) 什么是对象存储OSS 阿里云对象存储OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。多种存储类型供选择,全面优化存储成本。 OSS具有与平台无

    2023年04月13日
    浏览(46)
  • springboot整合阿里云oss实现文件上传

    通过阿里云oss进行文件上传,首先需要开通相关的服务,这边就不在具体说明,不懂的可以百度看一下。 阿里云oss有几个关键的参数,这也是后续通过java进行上传所需要的参数,分别是endpoint(域结点)、AccessKey ID(秘钥id)、AccessKey secret(秘钥)、bucket name(bucket域名)。  通过这几

    2024年01月25日
    浏览(48)
  • SpringBoot整合阿里云Oss实现文件图片上传

    目录 1. 阿里云Oss注册使用 2. 项目中使用 2.1 引入依赖以及插件 2.2 编写配置文件application.properties 2.3 创建常量类,获取配置信息  2.4 serviceImpl中实现逻辑            

    2024年02月08日
    浏览(67)
  • Spring Boot 实现文件本地以及OSS上传

    Maven依赖 封装工具类 上面的代码我们可以定义一个工具类,这样在任何需要文件上传的地方只需要调用 upload 方法即可,大大减少了代码量 使用工具类

    2024年03月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包