溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Vue.Js和Java實現文件分片上傳的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
代碼從項目中剝離修改，未經測試，僅提供思路。
前端
upload(file) {
//從后臺獲取已經上傳的文件分片數
getIdx(md5)
.then(function(res) {
let retry = 3;
uploadPart(retry, file, res.data);
})
.catch();
}
uploadPart(retry, file, idx) {
//設置分片大小（單位Byte）
let bufferLength = 1024 * 1024 * 5;
//計算開始的切割點,idx是上傳成功的分片數，未上傳過文件則開始點為0
let start = idx * bufferLength;
//全部上傳完畢或重試次數用完則退出
if(start>=file.size || retry<=0) return;
//計算分割的位置
let end = start + bufferLength;
//如果分割點超出文件大小，回退分割點
if (end > file.size) {end = fileSize;}
//切割文件
var chunk = file.slice(start, end);
//創建 formData 對象并添加數據
let formData = new FormData();
formData.set("file", chunk);
//如果是第一次上傳，連同文件塊數量也上傳
if (start == 0) {
//計算文件切片總數,向上取整
let chunkNum = Math.ceil(file.size / bufferLength);
formData.set("total", chunkNum);
}
//上傳文件的api，此處使用axios發送請求
doUpload(formData)
//發送成功，則上傳下一片，遞歸調用方法
.then(function() {
retry = xx;//刷新重試次數
uploadPart(retry, file, ++idx);
})
//發送失敗
.catch(function() {
retry--;//重試次數減一
//重試上傳這一片
uploadPart(retry, file, idx);
});
},文件分片上傳的前端關鍵代碼只有一句:
//切割文件
var chunk = file.slice(start, end);
通過slice方法來切割文件，然后文件上傳的流程視業務和具體技術而定，此處是使用axios發送請求，用遞歸調用上傳文件塊。
需要注意的是，Blob.slice(start, end),文件塊包含start指向的字節，而不包含end指向的字節，在使用時要注意Blob的邊界。
mozilla對slice的說明
后端
/**合并文件的實際操作*/
public static void doMergeFiles(String outFile, String[] files) {
//設置緩存大小
int BUFSIZE = 1024 * 1024;
//排序。文件后綴名是文件的順序。
Arrays.sort(files);
//輸出流
FileChannel outChannel = null;
//標記最后的一個文件
String lastFlag = files[files.length-1];
try {
outChannel = new FileOutputStream(outFile).getChannel();
//遍歷文件列表
for(String f : files){
//最后一塊文件用真實大小設置緩存，避免自動填充數據造成的md5不一致
if(lastFlag.equals(f)){
File last = new File(f);
BUFSIZE = (int) last.length();//獲取文件的大小并設置成緩存的大小
}
FileChannel fc = new FileInputStream(f).getChannel();
//用ByteBuffer創建緩存
ByteBuffer bb = ByteBuffer.allocate(BUFSIZE);
while(fc.read(bb) != -1){//把數據讀到緩存
bb.flip();//重置游標
outChannel.write(bb);//寫入數據
bb.clear();//清空數據
}
fc.close();//關閉流
}
} catch (IOException ioe) {
ioe.printStackTrace();
} finally {
try {if (outChannel != null) {outChannel.close();}} catch (IOException ignore) {}
}
}后端的關鍵是合并文件，當上傳完最后一塊文件就進行文件的合并。使用ByteBuffer緩存，使用FileChannel進行文件的讀寫完成合并操作。在保存文件時，文件名取一致，文件的后綴名則取文件塊的順序，比如第一塊文件是“xxx.01”,第10塊是“xxx.10”，注意，個位數前面要補“0”，這樣可以直接用Array.sort()進行排序。
為提高性能，可以適當設置緩存大小，可以邊上傳文件邊合并，不必等到文件都上傳了才合并。
拓展
此處的文件上傳是一次上傳一片，上傳成功才開始上傳下一片。如果前端不是使用javascript，能開啟使用多線程的話，可以改成同時上傳多片文件提高上傳速度。已經上傳的文件分片用bitmap存儲，上傳文件前，從后臺獲取已上傳的文件分片的bitmap數據然后解析，多線程處理未上傳的文件分片。
關于Vue.Js和Java實現文件分片上傳的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
