网站手机版怎么弄,成都电子商务网站,开公司流程及费用,有什么比较好的画册设计网站引言
文件上传是Web应用开发中常见的需求之一#xff0c;而实时显示文件上传的进度条可以提升用户体验。本教程将介绍如何使用Java后端和Vue前端实现文件上传进度条功能#xff0c;借助阿里云的OSS服务进行文件上传。
技术栈
后端#xff1a;Java、Spring Boot 、WebSock…引言
文件上传是Web应用开发中常见的需求之一而实时显示文件上传的进度条可以提升用户体验。本教程将介绍如何使用Java后端和Vue前端实现文件上传进度条功能借助阿里云的OSS服务进行文件上传。
技术栈
后端Java、Spring Boot 、WebSocket Server前端Vue、WebSocket Client
前端实现
安装依赖
npm install websocket sockjs-clientUploadFiles文件上传组件
注意异步请求接口的时候后端返回数据结构如下实际根据自己需求调整返回。
{code: 200,message: 成功,data: {requestId: file_1697165869563,}
}创建UploadFiles组件前端主业务逻辑上传文件方法和初始化websocket服务方法。这里requestId也是上传文件到OSS的Bucket桶后的文件名后面Java后端展示逻辑的时候有显示这里我服务端的端口是8886。实际根据自己需求调整。需要注意的是后端服务程序启动的时候端口号是与websocket服务共用的websocket服务不需要额外设置端口号。
templatedivinput typefile changehandleFileChange /button clickuploadFile上传/buttondiv{{ progress }}/div/div
/templatescriptimport 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() {// 使用时间戳来生成唯一IDconst timestamp new Date().getTime();// 在ID前面添加一个前缀以防止与其他ID冲突const uniqueID file_ timestamp;return uniqueID;},uploadFile() {this.initConnect();console.log(isWebSocketInitializedthis.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.code200){this.requestId response.data.data.requestId;console.log(requestId response.data.data.requestId);}else{// 弹框报错 response.data.messageconsole.log(coderesponse.data.code,messageresponse.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组件。
templatediv idappUploadFiles //div
/templatescript
import UploadFiles from ./components/UploadFiles.vue;export default {name: App,components: {UploadFiles}
};
/script后端实现
添加依赖
maven中添加socket服务依赖
!--websocket服务--
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependencyWebSocketConfig配置类
创建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;}Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(uploadProgressHandler, /test/upload-progress).setAllowedOrigins(*).addInterceptors(new HttpSessionHandshakeInterceptor());}/*** 引入定时任务bean防止和项目中quartz定时依赖冲突*/BeanNullablepublic 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 MapString, PutObjectProgressListener uploadProgressMap new ConcurrentHashMap();private static final MapString, WebSocketSession sessionMap new ConcurrentHashMap();Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) {uploadProgressMap.forEach((requestId, progressListener) - {try {session.sendMessage(new TextMessage(progressListener.getProgress()));} catch (IOException e) {e.printStackTrace();}});}Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception{sessionMap.put(session.getId(), session);super.afterConnectionEstablished(session);}public static MapString, 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%;}Overridepublic 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 filerequestIdsession* 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, requestIdoriginalFilename.substring(originalFilename.lastIndexOf(.)), file.getInputStream());// 文件上传请求附加监听器putObjectRequest.setProgressListener(new PutObjectProgressListener(session,fileSize));ossClient.putObject(putObjectRequest);ossClient.shutdown();return requestId;}
} Controller控制器
创建一个测试ControllerAPI测试文件上传和监听进度
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 {Autowiredprivate UploadProgressHandler uploadProgressHandler;/*** 文件上传并监听进度* param file* param requestId* return {link Map }{link String }, {link String }* author yangz* date 2023/10/12*/PostMapping(/upload)public MapString, String uploadFile(RequestParam(file) MultipartFile file, String requestId) throws IOException {//获取处理器监听到的WebSocketSession集合MapString, WebSocketSession sessionMap UploadProgressHandler.getSessionMap();CollectionWebSocketSession sessions sessionMap.values();ListWebSocketSession values new ArrayList(sessions);int size values.size();if (size1){throw new BusinessException(500,Websocket服务未连接);}// 关闭除最后一个之外的其他WebSocketSessionfor (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);MapString, String resultMap new HashMap();resultMap.put(requestId, requestId);return resultMap;}
}
结果展示
步骤1、选择文件。2、点击上传按钮。3、可以看到进度标签实时展示百分比进度
结语
通过以上步骤我们实现了一个包含上传文件和实时显示上传进度的文件上传功能。前端使用Vue编写了上传组件后端使用Java和Spring Boot进行文件上传处理。通过调用阿里云OSS服务和监听上传文件字节来计算进度我们能够实时显示文件上传的进度条提升用户体验。 结束语人生最大的浪费不是金钱的浪费而是时间的浪费、认知的迟到
