引言
文件上傳是Web應(yīng)用開發(fā)中常見的需求之一，而實(shí)時顯示文件上傳的進(jìn)度條可以提升用戶體驗(yàn)。本教程將介紹如何使用Java后端和Vue前端實(shí)現(xiàn)文件上傳進(jìn)度條功能，借助阿里云的OSS服務(wù)進(jìn)行文件上傳。
技術(shù)棧
- 后端：Java、Spring Boot 、WebSocket Server
- 前端：Vue、WebSocket Client
前端實(shí)現(xiàn)
安裝依賴
npm install websocket sockjs-client
UploadFiles文件上傳組件
注意：異步請求接口的時候，后端返回數(shù)據(jù)結(jié)構(gòu)如下，實(shí)際根據(jù)自己需求調(diào)整返回。
{
"code": 200,
"message": "成功",
"data": {
"requestId": "file_1697165869563",
}
}
創(chuàng)建UploadFiles組件，前端主業(yè)務(wù)邏輯：上傳文件方法和初始化websocket服務(wù)方法。這里requestId也是上傳文件到OSS的Bucket桶后的文件名，后面Java后端展示邏輯的時候有顯示，這里我服務(wù)端的端口是8886。實(shí)際根據(jù)自己需求調(diào)整。需要注意的是，后端服務(wù)程序啟動的時候，端口號是與websocket服務(wù)共用的，websocket服務(wù)不需要額外設(shè)置端口號。
<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('上傳進(jìn)度=' + 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>
后端實(shí)現(xiàn)
添加依賴
maven中添加socket服務(wù)依賴
<!--websocket服務(wù)-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
WebSocketConfig配置類
創(chuàng)建WebSocket配置類，配置socket服務(wù)注冊節(jié)點(diǎn)、處理跨域問題和添加監(jiān)聽處理器。
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());
}
/**
* 引入定時任務(wù)bean，防止和項(xiàng)目中quartz定時依賴沖突
*/
@Bean
@Nullable
public TaskScheduler taskScheduler() {
ThreadPoolTaskScheduler threadPoolScheduler = new ThreadPoolTaskScheduler();
threadPoolScheduler.setThreadNamePrefix("SockJS-");
threadPoolScheduler.setPoolSize(Runtime.getRuntime().availableProcessors());
threadPoolScheduler.setRemoveOnCancelPolicy(true);
return threadPoolScheduler;
}
}
UploadProgressHandler處理器
創(chuàng)建文件上傳進(jìn)程的處理器，繼承TextWebSocketHandler，記錄文件上傳監(jiān)聽器和記錄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文件上傳監(jiān)聽器
創(chuàng)建文件上傳監(jiān)聽器，監(jiān)聽文件上傳的進(jìn)度，并且同步到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;
/**
* 重寫上傳文件監(jiān)聽器
* @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("上傳進(jìn)度="+percentage + "%");
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
OSSUtil工具類
創(chuàng)建文件上傳工具類
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;
/**
* 文件上傳并監(jiān)聽進(jìn)度
* @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());
// 文件上傳請求附加監(jiān)聽器
putObjectRequest.setProgressListener(new PutObjectProgressListener(session,fileSize));
ossClient.putObject(putObjectRequest);
ossClient.shutdown();
return requestId;
}
}
Controller控制器
創(chuàng)建一個測試Controller，API測試文件上傳和監(jiān)聽進(jìn)度
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;
/**
* 文件上傳并監(jiān)聽進(jìn)度
* @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 {
//獲取處理器監(jiān)聽到的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服務(wù)未連接！");
}
// 關(guān)閉除最后一個之外的其他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服務(wù)監(jiān)聽文件上傳進(jìn)程
PutObjectProgressListener progressListener = new PutObjectProgressListener(webSocketSession, file.getSize());
uploadProgressHandler.addProgressListener(requestId, progressListener);
// 將 WebSocketSession 傳遞給 OSSUtil.uploadFile方法
OSSUtil.uploadFile(file, requestId, webSocketSession);
//上傳完成，移除websocket服務(wù)監(jiān)聽
uploadProgressHandler.removeProgressListener(requestId);
Map<String, String> resultMap = new HashMap<>();
resultMap.put("requestId", requestId);
return resultMap;
}
}
結(jié)果展示
步驟：1、選擇文件。2、點(diǎn)擊上傳按鈕。3、可以看到進(jìn)度標(biāo)簽實(shí)時展示百分比進(jìn)度
結(jié)語
通過以上步驟，我們實(shí)現(xiàn)了一個包含上傳文件和實(shí)時顯示上傳進(jìn)度的文件上傳功能。前端使用Vue編寫了上傳組件，后端使用Java和Spring Boot進(jìn)行文件上傳處理。通過調(diào)用阿里云OSS服務(wù)和監(jiān)聽上傳文件字節(jié)來計算進(jìn)度，我們能夠?qū)崟r顯示文件上傳的進(jìn)度條，提升用戶體驗(yàn)。文章來源：http://www.zghlxwxcb.cn/news/detail-751952.html
結(jié)束語：人生最大的浪費(fèi)不是金錢的浪費(fèi)，而是時間的浪費(fèi)、認(rèn)知的遲到文章來源地址http://www.zghlxwxcb.cn/news/detail-751952.html
到了這里，關(guān)于完整教程：Java+Vue+Websocket實(shí)現(xiàn)OSS文件上傳進(jìn)度條功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
