Java實現(xiàn)瀏覽器端大文件分片上傳
Breakpoint-http，是不是覺得這個名字有點low，break point斷點。這是一個大文件上傳的一種實現(xiàn)。因為本來很久沒寫過前端了，本來想自己好好寫一番js，可惜因為種種原因而作罷了。該項目是基于一款百度開源的前端上傳控件：WebUploader（百度開源的東西文檔一如既往的差，哈哈。或者是我理解能力差）。
Breakpoint-http，當初想實現(xiàn)這一塊web大文件上傳，是因為有一天同時詢問我這方面的知識，我發(fā)現(xiàn)好像在實戰(zhàn)中沒寫過這類的代碼啊。既然知道了自己不足那肯定要狠狠補一下。所以才有了這個項目。
對了這個項目是gradle+Spring Boot可能有部分人還沒接觸過這兩個東西，這里就不進行講解了，畢竟這不是重點，把gradle當成maven吧，雖然它還有更出色的功能。Spring Boot用來簡化Spring應用的初始搭建以及開發(fā)過程，一個約定大于規(guī)范的框架。
項目介紹Breakpoint-http 是一個基于大文件上傳，并參考網(wǎng)盤上傳文件，而基于web的大文件上傳實現(xiàn)項目。web中上傳大文件沒有桌面軟件那么容易，還好現(xiàn)在是身處于一個html5的時代。我們web端上傳文件常用的做法就是用表單上傳了，一旦上傳的文件大小較大，一旦帶寬跟不上，那用戶只能在哪里一直等著，不能做刷新頁面的操作，并且一旦產(chǎn)生網(wǎng)絡波動，那么用戶所做的一切就白費了。 Breakpoint-http就是為了保證在web端上傳大文件能達到基本的可靠性的一種方案，方法多種，可能的方案會更出色，歡迎討論。要讓大文件上傳能達到可用性，我們需要做到怎么樣的程度呢？ * 斷點續(xù)傳 最主要的功能之一，在斷網(wǎng)或者在暫停的情況下，能夠在上傳斷點中繼續(xù)上傳。 * 分塊上傳 也是斷點續(xù)傳的基礎(chǔ)之一，把大文件通過前端分塊，然后后臺在組在一起。 * 文件妙傳 這個相信大家在網(wǎng)盤中見過不少了，就是服務中已經(jīng)有人上傳過得文件，其他人再上傳這個文件就秒上傳到服務中去。 * 其他功能 把下面這些功能歸類到其他，是因為它們基本都是通過WebUploader(http://fex.baidu.com/webuploader)來實現(xiàn)的，很簡單。 - 多線程上傳 多個線程上傳不同的塊文件。 - 文件進度顯示 顯示文件的上傳完成情況。 - UI等等。
需要知識點 基于spring boot開發(fā)的。 WebUploader，WebUploader是由Baidu WebFE(FEX)團隊開發(fā)的一個簡單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。 redis,key-value存儲系統(tǒng)，在這里我把redis用作存儲文件路徑來使用。 Gradle，Gradle是一個基于JVM的構(gòu)建工具。這里我用Gradle頂替了Maven。嗯，多學點東西。啟動項目main方法直接運行：(1)找到App啟動類（win.pangniu.learn包下）(2)執(zhí)行main方法。(3)然后用瀏覽器訪問：http://localhost:9090
tomcat運行：(1)執(zhí)行命令gradle war。(2)在out目錄下找到bphttp.war包。(3)拷貝到tomcat，然后運行tomcat。(4)然后用瀏覽器訪問：http://localhost:9090
項目示范上傳完后的頁面
妙傳功能演示頁面
該項目核心就是文件分塊上傳。前后端要高度配合，需要雙方約定好一些數(shù)據(jù)，才能完成大文件分塊，我們在項目中要重點解決的以下問題。* 如何分片；* 如何合成一個文件；* 中斷了從哪個分片開始。如何分，利用強大的js庫，來減輕我們的工作，市場上已經(jīng)能有關(guān)于大文件分塊的輪子，雖然程序員的天性曾迫使我重新造輪子。但是因為時間的關(guān)系還有工作的關(guān)系，我只能罷休了。最后我選擇了百度的WebUploader來實現(xiàn)前端所需。如何合，在合之前，我們還得先解決一個問題，我們?nèi)绾螀^(qū)分分塊所屬那個文件的。剛開始的時候，我是采用了前端生成了唯一uuid來做文件的標志，在每個分片請求上帶上。不過后來在做秒傳的時候我放棄了，采用了Md5來維護分塊和文件關(guān)系。在服務端合并文件，和記錄分塊的問題，在這方面其實行業(yè)已經(jīng)給了很好的解決方案了。參考迅雷，你會發(fā)現(xiàn)，每次下載中的時候，都會有兩個文件，一個文件主體，另外一個就是文件臨時文件，臨時文件存儲著每個分塊對應字節(jié)位的狀態(tài)。這些都是需要前后端密切聯(lián)系才能做好，前端需要根據(jù)固定大小對文件進行分片，并且請求中要帶上分片序號和大小。前端發(fā)送請求順利到達后臺后，服務器只需要按照請求數(shù)據(jù)中給的分片序號和每片分塊大小（分片大小是固定且一樣的）算出開始位置，與讀取到的文件片段數(shù)據(jù)，寫入文件即可。
功能分析分塊上傳分塊上傳可以說是我們整個項目的基礎(chǔ)，像斷點續(xù)傳、暫停這些都是需要用到分塊。分塊這塊相對來說比較簡單。前端是采用了webuploader，分塊等基礎(chǔ)功能已經(jīng)封裝起來，使用方便。借助webUpload提供給我們的文件API,前端就顯得異常簡單。
// 實例化wu var uploader = WebUploader.create({pick: { id: ’#picker’, label: ’點擊選擇文件’},formData: { uid: 0, md5: ’’, chunkSize: chunkSize},//dnd: ’#dndArea’,//paste: ’#uploader’,swf: ’js/Uploader.swf’,chunked: true,chunkSize: chunkSize, // 字節(jié) 1M分塊threads: 3,server: ’index/fileUpload’,auto: false,// 禁掉全局的拖拽功能。這樣不會出現(xiàn)圖片拖進頁面的時候，把圖片打開。disableGlobalDnd: true,fileNumLimit: 1024,fileSizeLimit: 1024 * 1024 * 1024, // 200 MfileSingleSizeLimit: 1024 * 1024 * 1024 // 50 M });
分則必合。把大文件分片了，但是分片了就沒有原本文件功能，所以我們要把分片合成為原本的文件。我們只需要把分片按原本位置寫入到文件中去。因為前面原理那一部我們已經(jīng)講到了，我們知道分塊大小和分塊序號，我就可以知道該分塊在文件中的起始位置。所以這里使用RandomAccessFile是明智的，RandomAccessFile能在文件里面前后移動。但是在andomAccessFile的絕大多數(shù)功能，已經(jīng)被JDK1.4的NIO的“內(nèi)存映射文件(memory-mapped files)”取代了。我在該項目中分別寫了使用RandomAccessFile與MappedByteBuffer來合成文件。分別對應的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。兩個方法代碼如下。
public void uploadFileRandomAccessFile(MultipartFileParam param) throws IOException {String fileName = param.getName();String tempDirPath = finalDirPath + param.getMd5();String tempFileName = fileName + '_tmp';File tmpDir = new File(tempDirPath);File tmpFile = new File(tempDirPath, tempFileName);if (!tmpDir.exists()) { tmpDir.mkdirs();}RandomAccessFile accessTmpFile = new RandomAccessFile(tmpFile, 'rw');long offset = CHUNK_SIZE * param.getChunk();//定位到該分片的偏移量accessTmpFile.seek(offset);//寫入該分片數(shù)據(jù)accessTmpFile.write(param.getFile().getBytes());// 釋放accessTmpFile.close();boolean isOk = checkAndSetUploadProgress(param, tempDirPath);if (isOk) { boolean flag = renameFile(tmpFile, fileName); System.out.println('upload complete !!' + flag + ' name=' + fileName);} } public void uploadFileByMappedByteBuffer(MultipartFileParam param) throws IOException { String fileName = param.getName(); String uploadDirPath = finalDirPath + param.getMd5(); String tempFileName = fileName + '_tmp'; File tmpDir = new File(uploadDirPath); File tmpFile = new File(uploadDirPath, tempFileName); if (!tmpDir.exists()) {tmpDir.mkdirs(); } RandomAccessFile tempRaf = new RandomAccessFile(tmpFile, 'rw'); FileChannel fileChannel = tempRaf.getChannel(); //寫入該分片數(shù)據(jù) long offset = CHUNK_SIZE * param.getChunk(); byte[] fileData = param.getFile().getBytes(); MappedByteBuffer mappedByteBuffer = fileChannel.map(FileChannel.MapMode.READ_WRITE, offset, fileData.length); mappedByteBuffer.put(fileData); // 釋放 FileMD5Util.freedMappedByteBuffer(mappedByteBuffer); fileChannel.close(); boolean isOk = checkAndSetUploadProgress(param, uploadDirPath); if (isOk) {boolean flag = renameFile(tmpFile, fileName);System.out.println('upload complete !!' + flag + ' name=' + fileName); }}秒傳功能
秒傳功能，相信大家都體現(xiàn)過了，網(wǎng)盤上傳的時候，發(fā)現(xiàn)上傳的文件秒傳了。其實原理稍微有研究過的同學應該知道，其實就是檢驗文件MD5，記錄下上傳到系統(tǒng)的文件的MD5,在一個文件上傳前先獲取文件內(nèi)容MD5值或者部分取值MD5，然后在匹配系統(tǒng)上的數(shù)據(jù)。Breakpoint-http實現(xiàn)秒傳原理，客戶端選擇文件之后，點擊上傳的時候觸發(fā)獲取文件MD5值，獲取MD5后調(diào)用系統(tǒng)一個接口（/index/checkFileMd5），查詢該MD5是否已經(jīng)存在（我在該項目中用redis來存儲數(shù)據(jù)，用文件MD5值來作key，value是文件存儲的地址。）接口返回檢查狀態(tài)，然后再進行下一步的操作。相信大家看代碼就能明白了。 嗯，前端的MD5取值也是用了webuploader自帶的功能，這還是個不錯的工具。
斷點續(xù)傳斷點續(xù)傳，就是在文件上傳的過程中發(fā)生了中斷，人為因素（暫停）或者不可抗力（斷網(wǎng)或者網(wǎng)絡差）導致了文件上傳到一半失敗了。然后在環(huán)境恢復的時候，重新上傳該文件，而不至于是從新開始上傳的。 前面也已經(jīng)講過，斷點續(xù)傳的功能是基于分塊上傳來實現(xiàn)的，把一個大文件分成很多個小塊，服務端能夠把每個上傳成功的分塊都落地下來，客戶端在上傳文件開始時調(diào)用接口快速驗證，條件選擇跳過某個分塊。 實現(xiàn)原理，就是在每個文件上傳前，就獲取到文件MD5取值，在上傳文件前調(diào)用接口（/index/checkFileMd5，沒錯也是秒傳的檢驗接口）如果獲取的文件狀態(tài)是未完成，則返回所有的還沒上傳的分塊的編號，然后前端進行條件篩算出哪些沒上傳的分塊，然后進行上傳。
/** * 秒傳判斷，斷點判斷 * * @return */ @RequestMapping(value = 'checkFileMd5', method = RequestMethod.POST) @ResponseBody public Object checkFileMd5(String md5) throws IOException {Object processingObj = stringRedisTemplate.opsForHash().get(Constants.FILE_UPLOAD_STATUS, md5);if (processingObj == null) { return new ResultVo(ResultStatus.NO_HAVE);}String processingStr = processingObj.toString();boolean processing = Boolean.parseBoolean(processingStr);String value = stringRedisTemplate.opsForValue().get(Constants.FILE_MD5_KEY + md5);if (processing) { return new ResultVo(ResultStatus.IS_HAVE, value);} else { File confFile = new File(value); byte[] completeList = FileUtils.readFileToByteArray(confFile); List<String> missChunkList = new LinkedList<>(); for (int i = 0; i < completeList.length; i++) {if (completeList[i] != Byte.MAX_VALUE) { missChunkList.add(i + '');} } return new ResultVo<>(ResultStatus.ING_HAVE, missChunkList);} }總結(jié)
身為一個具有拖延癥的程序猿，寫個文檔及其不容易，這方面還是優(yōu)待加強，寫代碼時間都還沒寫這個文檔長，并且寫了那么久還那么爛的文檔。實在抱歉，望諒解。
獲取代碼
GitHub:https://github.com/Fourwenwen/Breakpoint-http.gitOSChina項目主頁: https://git.oschina.net/Fourwenwen/breakpoint-http.git
參考文獻[1]http://fex.baidu.com/webuploader/[2]http://www.zuidaima.com/blog/2819949848316928.htm[3]https://my.oschina.net/feichexia/blog/212318
到此這篇關(guān)于Java實現(xiàn)瀏覽器端大文件分片上傳的文章就介紹到這了,更多相關(guān)Java 大文件分片上傳內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備