Spring Boot 2.x（十六）：玩轉vue檔案上傳

SpringBoot Vue · 發表 2019-05-10 20:52:00

摘要：為什麼使用Vue-Simple-Uploader 最近用到了Vue + Spring Boot來完成檔案上傳的操作，踩了一些坑，對比了一些Vue的元件，發現了一個很好用的元件——Vue-Simple-Uploader，先附上gayhub的，再說說為什麼選用這個元件，對比vue-ant...

為什麼使用Vue-Simple-Uploader

最近用到了Vue + Spring Boot來完成檔案上傳的操作，踩了一些坑，對比了一些Vue的元件，發現了一個很好用的元件——Vue-Simple-Uploader，先附上gayhub的

，再說說為什麼選用這個元件，對比vue-ant-design和element-ui的上傳元件，它能做到更多的事情，比如：

可暫停、繼續上傳
上傳佇列管理，支援最大併發上傳
分塊上傳
支援進度、預估剩餘時間、出錯自動重試、重傳等操作
支援“快傳”，通過檔案判斷服務端是否已存在從而實現“快傳”

由於需求中需要用到斷點續傳，所以選用了這個元件，下面我會從最基礎的上傳開始說起：

單檔案上傳、多檔案上傳、資料夾上傳

Vue程式碼：

<uploader
:options="uploadOptions1"
:autoStart="true"
class="uploader-app"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<uploader-btn style="margin-right:20px;" :attrs="attrs">選擇檔案</uploader-btn>
<uploader-btn :attrs="attrs" directory>選擇資料夾</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>

該元件預設支援多檔案上傳，這裡我們從官方demo中貼上過來這段程式碼，然後在 uploadOption1 中配置上傳的路徑即可，其中uploader-btn 中設定directory屬性即可選擇資料夾進行上傳。

uploadOption1：

uploadOptions1: {
target: "//localhost:18080/api/upload/single",//上傳的介面
testChunks: false, //是否開啟伺服器分片校驗
fileParameterName: "file",//預設的檔案引數名
headers: {},
query() {},
categaryMap: { //用於限制上傳的型別
image: ["gif", "jpg", "jpeg", "png", "bmp"]
}
}

在後臺的介面的編寫，我們為了方便，定義了一個chunk類用於接收元件預設傳輸的一些後面方便分塊斷點續傳的引數：

Chunk類

@Data
public class Chunk implements Serializable {

private static final long serialVersionUID = 7073871700302406420L;

private Long id;
/**
* 當前檔案塊，從1開始
*/
private Integer chunkNumber;
/**
* 分塊大小
*/
private Long chunkSize;
/**
* 當前分塊大小
*/
private Long currentChunkSize;
/**
* 總大小
*/
private Long totalSize;
/**
* 檔案標識
*/
private String identifier;
/**
* 檔名
*/
private String filename;
/**
* 相對路徑
*/
private String relativePath;
/**
* 總塊數
*/
private Integer totalChunks;
/**
* 檔案型別
*/
private String type;

/**
* 要上傳的檔案
*/
private MultipartFile file;
}

在編寫介面的時候，我們直接使用這個類作為引數去接收vue-simple-uploader傳來的引數即可，注意這裡要使用POST來接收喲~

介面方法：

@PostMapping("single")
public void singleUpload(Chunk chunk) {
// 獲取傳來的檔案
MultipartFile file = chunk.getFile();
// 獲取檔名
String filename = chunk.getFilename();
try {
// 獲取檔案的內容
byte[] bytes = file.getBytes();
// SINGLE_UPLOADER是我定義的一個路徑常量，這裡的意思是，如果不存在該目錄，則去建立
if (!Files.isWritable(Paths.get(SINGLE_FOLDER))) {
Files.createDirectories(Paths.get(SINGLE_FOLDER));
}
// 獲取上傳檔案的路徑
Path path = Paths.get(SINGLE_FOLDER,filename);
// 將位元組寫入該檔案
Files.write(path, bytes);
} catch (IOException e) {
e.printStackTrace();
}
}

這裡需要注意一點，如果檔案過大的話，Spring Boot後臺會報錯

org.apache.tomcat.util.http.fileupload.FileUploadBase$FileSizeLimitExceededException: The field file exceeds its maximum permitted size of 1048576 bytes.

這時需要在 application.yml 中配置servlet的最大接收檔案大小(預設大小是1MB和10MB)

spring:
servlet:
multipart:
max-file-size: 10MB 
max-request-size: 100MB

下面我們啟動專案，選擇需要上傳的檔案就可以看到效果了~ 是不是很方便~ 但是同樣的事情其餘的元件基本上也可以做到，之所以選擇這個，更多的是因為它可以支援斷點分塊上傳，實現上傳過程中斷網，再次聯網的話可以從斷點位置開始繼續秒傳~下面我們來看看斷點續傳是怎麼玩的。

斷點分塊續傳

先說一下分塊斷點續傳的大概原理，我們在元件可以配置分塊的大小，大於該值的檔案會被分割成若干塊兒去上傳，同時將該分塊的 chunkNumber 儲存到資料庫( Mysql or Redis ，這裡我選擇的是 Redis ）

元件上傳的時候會攜帶一個 identifier 的引數(這裡我採用的是預設的值，你也可以通過生成md5的方式來重新賦值引數)，將 identifier 作為 Redis 的key，設定hashKey為 ”chunkNumber“ ，value是由每次上傳的 chunkNumber 組成的一個 Set 集合。

在將 uploadOption 中的 testChunk 的值設定為 true 之後，該元件會先發一個 get 請求，獲取到已經上傳的chunkNumber集合，然後在 checkChunkUploadedByResponse 方法中判斷是否存在該片段來進行跳過，傳送 post 請求上傳分塊的檔案。

每次上傳片段的時候，service層返回當前的集合大小，並與引數中的totalChunks進行對比，如果發現相等，就返回一個狀態值，來控制前端發出 merge 請求，將剛剛上傳的分塊合為一個檔案，至此檔案的斷點分塊上傳就完成了。

下面是對應的程式碼~

Vue程式碼：

<uploader
:options="uploadOptions2"
:autoStart="true"
:files="files"
@file-added="onFileAdded2"
@file-success="onFileSuccess2"
@file-progress="onFileProgress2"
@file-error="onFileError2"
>
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<uploader-btn :attrs="attrs">分塊上傳</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>

校驗是否上傳過的程式碼

uploadOptions2: {
target: "//localhost:18080/api/upload/chunk",
chunkSize: 1 * 1024 * 1024,
testChunks: true,
checkChunkUploadedByResponse: function(chunk, message) {
let objMessage = JSON.parse(message);
// 獲取當前的上傳塊的集合
let chunkNumbers = objMessage.chunkNumbers;
// 判斷當前的塊是否被該集合包含，從而判定是否需要跳過
return (chunkNumbers || []).indexOf(chunk.offset + 1) >= 0;
},
headers: {},
query() {},
categaryMap: {
image: ["gif", "jpg", "jpeg", "png", "bmp"],
zip: ["zip"],
document: ["csv"]
}
}

上傳後成功的處理，判斷狀態來進行merge操作

onFileSuccess2(rootFile, file, response, chunk) {
let res = JSON.parse(response);
// 後臺報錯
if (res.code == 1) {
return;
}
// 需要合併
if (res.code == 205) {
// 傳送merge請求，引數為identifier和filename，這個要注意需要和後臺的Chunk類中的引數名對應，否則會接收不到~
const formData = new FormData();
formData.append("identifier", file.uniqueIdentifier);
formData.append("filename", file.name);
merge(formData).then(response => {});
} 
},

判定是否存在的程式碼，注意這裡的是GET請求！！！

@GetMapping("chunk")
public Map<String, Object> checkChunks(Chunk chunk) {
return uploadService.checkChunkExits(chunk);
}

@Override
public Map<String, Object> checkChunkExits(Chunk chunk) {
Map<String, Object> res = new HashMap<>();
String identifier = chunk.getIdentifier();
if (redisDao.existsKey(identifier)) {
Set<Integer> chunkNumbers = (Set<Integer>) redisDao.hmGet(identifier, "chunkNumberList");
res.put("chunkNumbers",chunkNumbers);
}
return res;
}

儲存分塊，並儲存資料到Redis的程式碼。這裡的是POST請求！！！

@PostMapping("chunk")
public Map<String, Object> saveChunk(Chunk chunk) {
// 這裡的操作和儲存單段落的基本是一致的~
MultipartFile file = chunk.getFile();
Integer chunkNumber = chunk.getChunkNumber();
String identifier = chunk.getIdentifier();
byte[] bytes;
try {
bytes = file.getBytes();
// 這裡的不同之處在於這裡進行了一個儲存分塊時將檔名的按照-chunkNumber的進行儲存
Path path = Paths.get(generatePath(CHUNK_FOLDER, chunk));
Files.write(path, bytes);
} catch (IOException e) {
e.printStackTrace();
}
// 這裡進行的是儲存到redis，並返回集合的大小的操作
Integer chunks = uploadService.saveChunk(chunkNumber, identifier);
Map<String, Object> result = new HashMap<>();
// 如果集合的大小和totalChunks相等，判定分塊已經上傳完畢，進行merge操作
if (chunks.equals(chunk.getTotalChunks())) {
result.put("message","上傳成功！");
result.put("code", 205);
}
return result;
}


/**
* 生成分塊的檔案路徑
*/
private static String generatePath(String uploadFolder, Chunk chunk) {
StringBuilder sb = new StringBuilder();
// 拼接上傳的路徑
sb.append(uploadFolder).append(File.separator).append(chunk.getIdentifier());
//判斷uploadFolder/identifier 路徑是否存在，不存在則建立
if (!Files.isWritable(Paths.get(sb.toString()))) {
try {
Files.createDirectories(Paths.get(sb.toString()));
} catch (IOException e) {
log.error(e.getMessage(), e);
}
}
// 返回以 - 隔離的分塊檔案，後面跟的chunkNumber方便後面進行排序進行merge
return sb.append(File.separator)
.append(chunk.getFilename())
.append("-")
.append(chunk.getChunkNumber()).toString();

}

/**
* 儲存資訊到Redis
*/
public Integer saveChunk(Integer chunkNumber, String identifier) {
// 獲取目前的chunkList
Set<Integer> oldChunkNumber = (Set<Integer>) redisDao.hmGet(identifier, "chunkNumberList");
// 如果獲取為空，則新建Set集合，並將當前分塊的chunkNumber加入後存到Redis
if (Objects.isNull(oldChunkNumber)) {
Set<Integer> newChunkNumber = new HashSet<>();
newChunkNumber.add(chunkNumber);
redisDao.hmSet(identifier, "chunkNumberList", newChunkNumber);
// 返回集合的大小
return newChunkNumber.size();
} else {
// 如果不為空，將當前分塊的chunkNumber加到當前的chunkList中，並存入Redis
oldChunkNumber.add(chunkNumber);
redisDao.hmSet(identifier, "chunkNumberList", oldChunkNumber);
// 返回集合的大小
return oldChunkNumber.size();
}

}

合併的後臺程式碼：

@PostMapping("merge")
public void mergeChunks(Chunk chunk) {
String fileName = chunk.getFilename();
uploadService.mergeFile(fileName,CHUNK_FOLDER + File.separator + chunk.getIdentifier());
}

@Override
public void mergeFile(String fileName, String chunkFolder) {
try {
// 如果合併後的路徑不存在，則新建
if (!Files.isWritable(Paths.get(mergeFolder))) {
Files.createDirectories(Paths.get(mergeFolder));
}
// 合併的檔名
String target = mergeFolder + File.separator + fileName;
// 建立檔案
Files.createFile(Paths.get(target));
// 遍歷分塊的資料夾，並進行過濾和排序後以追加的方式寫入到合併後的檔案
Files.list(Paths.get(chunkFolder))
//過濾帶有"-"的檔案
.filter(path -> path.getFileName().toString().contains("-"))
//按照從小到大進行排序
.sorted((o1, o2) -> {
String p1 = o1.getFileName().toString();
String p2 = o2.getFileName().toString();
int i1 = p1.lastIndexOf("-");
int i2 = p2.lastIndexOf("-");
return Integer.valueOf(p2.substring(i2)).compareTo(Integer.valueOf(p1.substring(i1)));
})
.forEach(path -> {
try {
//以追加的形式寫入檔案
Files.write(Paths.get(target), Files.readAllBytes(path), StandardOpenOption.APPEND);
//合併後刪除該塊
Files.delete(path);
} catch (IOException e) {
e.printStackTrace();
}
});
} catch (IOException e) {
e.printStackTrace();
}
}

至此，我們的斷點續傳就完美結束了，完整的程式碼我已經上傳到gayhub~，歡迎star fork pr~(後面還會把博文也上傳到gayhub喲~)

前端：https://github.com/viyog/viboot-front

後臺：https://github.com/viyog/viboot

寫在後面

最近由於家庭+工作忙昏了頭，鴿了這麼久很是抱歉，從這周開始恢復更新，同時本人在準備往大資料轉型，後續會出一系列的Java轉型大資料的學習筆記，包括Java基礎系列的深入解讀和重寫，同時Spring Boot系列還會一直保持連載，不過可能不會每週都更，我會把目前使用Spring Boot中遇到的問題和坑寫一寫，謝謝一直支援我的粉絲們~愛你們~

Spring Boot 2.x（十六）：玩轉vue檔案上傳

為什麼使用Vue-Simple-Uploader

單檔案上傳、多檔案上傳、資料夾上傳

斷點分塊續傳

寫在後面

您可能也會喜歡…