快捷導(dǎo)航

Java實(shí)現(xiàn)瀏覽器端大文件分片上傳

更新時(shí)間：2021年08月06日 09:54:07 作者：Fourwen

本文主要介紹了Java實(shí)現(xiàn)瀏覽器端大文件分片上傳，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景介紹

Breakpoint-http，是不是覺得這個(gè)名字有點(diǎn)low，break point斷點(diǎn)。這是一個(gè)大文件上傳的一種實(shí)現(xiàn)。因?yàn)楸緛砗芫脹]寫過前端了，本來想自己好好寫一番js，可惜因?yàn)榉N種原因而作罷了。該項(xiàng)目是基于一款百度開源的前端上傳控件：WebUploader（百度開源的東西文檔一如既往的差，哈哈?；蛘呤俏依斫饽芰Σ睿?/p>

Breakpoint-http，當(dāng)初想實(shí)現(xiàn)這一塊web大文件上傳，是因?yàn)橛幸惶焱瑫r(shí)詢問我這方面的知識(shí)，我發(fā)現(xiàn)好像在實(shí)戰(zhàn)中沒寫過這類的代碼啊。既然知道了自己不足那肯定要狠狠補(bǔ)一下。所以才有了這個(gè)項(xiàng)目。

對(duì)了這個(gè)項(xiàng)目是gradle+Spring Boot可能有部分人還沒接觸過這兩個(gè)東西，這里就不進(jìn)行講解了，畢竟這不是重點(diǎn)，把gradle當(dāng)成maven吧，雖然它還有更出色的功能。Spring Boot用來簡(jiǎn)化Spring應(yīng)用的初始搭建以及開發(fā)過程，一個(gè)約定大于規(guī)范的框架。

項(xiàng)目介紹

Breakpoint-http 是一個(gè)基于大文件上傳，并參考網(wǎng)盤上傳文件，而基于web的大文件上傳實(shí)現(xiàn)項(xiàng)目。web中上傳大文件沒有桌面軟件那么容易，還好現(xiàn)在是身處于一個(gè)html5的時(shí)代。我們web端上傳文件常用的做法就是用表單上傳了，一旦上傳的文件大小較大，一旦帶寬跟不上，那用戶只能在哪里一直等著，不能做刷新頁面的操作，并且一旦產(chǎn)生網(wǎng)絡(luò)波動(dòng)，那么用戶所做的一切就白費(fèi)了。
Breakpoint-http就是為了保證在web端上傳大文件能達(dá)到基本的可靠性的一種方案，方法多種，可能的方案會(huì)更出色，歡迎討論。要讓大文件上傳能達(dá)到可用性，我們需要做到怎么樣的程度呢？
* 斷點(diǎn)續(xù)傳最主要的功能之一，在斷網(wǎng)或者在暫停的情況下，能夠在上傳斷點(diǎn)中繼續(xù)上傳。
* 分塊上傳也是斷點(diǎn)續(xù)傳的基礎(chǔ)之一，把大文件通過前端分塊，然后后臺(tái)在組在一起。
* 文件妙傳這個(gè)相信大家在網(wǎng)盤中見過不少了，就是服務(wù)中已經(jīng)有人上傳過得文件，其他人再上傳這個(gè)文件就秒上傳到服務(wù)中去。
* 其他功能把下面這些功能歸類到其他，是因?yàn)樗鼈兓径际峭ㄟ^WebUploader(http://fex.baidu.com/webuploader)來實(shí)現(xiàn)的，很簡(jiǎn)單。
- 多線程上傳多個(gè)線程上傳不同的塊文件。
- 文件進(jìn)度顯示顯示文件的上傳完成情況。
- UI等等。

需要知識(shí)點(diǎn)

基于spring boot開發(fā)的。
WebUploader，WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，F(xiàn)LASH為輔的現(xiàn)代文件上傳組件。
redis,key-value存儲(chǔ)系統(tǒng)，在這里我把redis用作存儲(chǔ)文件路徑來使用。
Gradle，Gradle是一個(gè)基于JVM的構(gòu)建工具。這里我用Gradle頂替了Maven。嗯，多學(xué)點(diǎn)東西。

啟動(dòng)項(xiàng)目

main方法直接運(yùn)行：
(1)找到App啟動(dòng)類（win.pangniu.learn包下）
(2)執(zhí)行main方法。
(3)然后用瀏覽器訪問：http://localhost:9090

tomcat運(yùn)行：
(1)執(zhí)行命令gradle war。
(2)在out目錄下找到bphttp.war包。
(3)拷貝到tomcat，然后運(yùn)行tomcat。
(4)然后用瀏覽器訪問：http://localhost:9090

項(xiàng)目示范

上傳完后的頁面

妙傳功能演示頁面

核心講解

核心原理

該項(xiàng)目核心就是文件分塊上傳。前后端要高度配合，需要雙方約定好一些數(shù)據(jù)，才能完成大文件分塊，我們?cè)陧?xiàng)目中要重點(diǎn)解決的以下問題。
* 如何分片；
* 如何合成一個(gè)文件；
* 中斷了從哪個(gè)分片開始。
如何分，利用強(qiáng)大的js庫，來減輕我們的工作，市場(chǎng)上已經(jīng)能有關(guān)于大文件分塊的輪子，雖然程序員的天性曾迫使我重新造輪子。但是因?yàn)闀r(shí)間的關(guān)系還有工作的關(guān)系，我只能罷休了。最后我選擇了百度的WebUploader來實(shí)現(xiàn)前端所需。
如何合，在合之前，我們還得先解決一個(gè)問題，我們?nèi)绾螀^(qū)分分塊所屬那個(gè)文件的。剛開始的時(shí)候，我是采用了前端生成了唯一uuid來做文件的標(biāo)志，在每個(gè)分片請(qǐng)求上帶上。不過后來在做秒傳的時(shí)候我放棄了，采用了Md5來維護(hù)分塊和文件關(guān)系。
在服務(wù)端合并文件，和記錄分塊的問題，在這方面其實(shí)行業(yè)已經(jīng)給了很好的解決方案了。參考迅雷，你會(huì)發(fā)現(xiàn)，每次下載中的時(shí)候，都會(huì)有兩個(gè)文件，一個(gè)文件主體，另外一個(gè)就是文件臨時(shí)文件，臨時(shí)文件存儲(chǔ)著每個(gè)分塊對(duì)應(yīng)字節(jié)位的狀態(tài)。
這些都是需要前后端密切聯(lián)系才能做好，前端需要根據(jù)固定大小對(duì)文件進(jìn)行分片，并且請(qǐng)求中要帶上分片序號(hào)和大小。前端發(fā)送請(qǐng)求順利到達(dá)后臺(tái)后，服務(wù)器只需要按照請(qǐng)求數(shù)據(jù)中給的分片序號(hào)和每片分塊大小（分片大小是固定且一樣的）算出開始位置，與讀取到的文件片段數(shù)據(jù)，寫入文件即可。

功能分析

分塊上傳

分塊上傳可以說是我們整個(gè)項(xiàng)目的基礎(chǔ)，像斷點(diǎn)續(xù)傳、暫停這些都是需要用到分塊。
分塊這塊相對(duì)來說比較簡(jiǎn)單。前端是采用了webuploader，分塊等基礎(chǔ)功能已經(jīng)封裝起來，使用方便。
借助webUpload提供給我們的文件API,前端就顯得異常簡(jiǎn)單。

    // 實(shí)例化wu
    var uploader = WebUploader.create({
        pick: {
            id: '#picker',
            label: '點(diǎn)擊選擇文件'
        },
        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,

        // 禁掉全局的拖拽功能。這樣不會(huì)出現(xiàn)圖片拖進(jìn)頁面的時(shí)候，把圖片打開。
        disableGlobalDnd: true,
        fileNumLimit: 1024,
        fileSizeLimit: 1024 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 1024 * 1024 * 1024    // 50 M
    });

分則必合。把大文件分片了，但是分片了就沒有原本文件功能，所以我們要把分片合成為原本的文件。我們只需要把分片按原本位置寫入到文件中去。因?yàn)榍懊嬖砟且徊课覀円呀?jīng)講到了，我們知道分塊大小和分塊序號(hào)，我就可以知道該分塊在文件中的起始位置。所以這里使用RandomAccessFile是明智的，RandomAccessFile能在文件里面前后移動(dòng)。但是在andomAccessFile的絕大多數(shù)功能，已經(jīng)被JDK1.4的NIO的“內(nèi)存映射文件(memory-mapped files)”取代了。我在該項(xiàng)目中分別寫了使用RandomAccessFile與MappedByteBuffer來合成文件。分別對(duì)應(yīng)的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。兩個(gè)方法代碼如下。

 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)盤上傳的時(shí)候，發(fā)現(xiàn)上傳的文件秒傳了。其實(shí)原理稍微有研究過的同學(xué)應(yīng)該知道，其實(shí)就是檢驗(yàn)文件MD5，記錄下上傳到系統(tǒng)的文件的MD5,在一個(gè)文件上傳前先獲取文件內(nèi)容MD5值或者部分取值MD5，然后在匹配系統(tǒng)上的數(shù)據(jù)。
Breakpoint-http實(shí)現(xiàn)秒傳原理，客戶端選擇文件之后，點(diǎn)擊上傳的時(shí)候觸發(fā)獲取文件MD5值，獲取MD5后調(diào)用系統(tǒng)一個(gè)接口（/index/checkFileMd5），查詢?cè)揗D5是否已經(jīng)存在（我在該項(xiàng)目中用redis來存儲(chǔ)數(shù)據(jù)，用文件MD5值來作key，value是文件存儲(chǔ)的地址。）接口返回檢查狀態(tài)，然后再進(jìn)行下一步的操作。相信大家看代碼就能明白了。
嗯，前端的MD5取值也是用了webuploader自帶的功能，這還是個(gè)不錯(cuò)的工具。

斷點(diǎn)續(xù)傳

斷點(diǎn)續(xù)傳，就是在文件上傳的過程中發(fā)生了中斷，人為因素（暫停）或者不可抗力（斷網(wǎng)或者網(wǎng)絡(luò)差）導(dǎo)致了文件上傳到一半失敗了。然后在環(huán)境恢復(fù)的時(shí)候，重新上傳該文件，而不至于是從新開始上傳的。
前面也已經(jīng)講過，斷點(diǎn)續(xù)傳的功能是基于分塊上傳來實(shí)現(xiàn)的，把一個(gè)大文件分成很多個(gè)小塊，服務(wù)端能夠把每個(gè)上傳成功的分塊都落地下來，客戶端在上傳文件開始時(shí)調(diào)用接口快速驗(yàn)證，條件選擇跳過某個(gè)分塊。
實(shí)現(xiàn)原理，就是在每個(gè)文件上傳前，就獲取到文件MD5取值，在上傳文件前調(diào)用接口（/index/checkFileMd5，沒錯(cuò)也是秒傳的檢驗(yàn)接口）如果獲取的文件狀態(tài)是未完成，則返回所有的還沒上傳的分塊的編號(hào)，然后前端進(jìn)行條件篩算出哪些沒上傳的分塊，然后進(jìn)行上傳。

/**
     * 秒傳判斷，斷點(diǎn)判斷
     *
     * @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);
        }
    }