1. 程式人生 > 其它 >php超大檔案上傳方案

php超大檔案上傳方案

一、 功能性需求與非功能性需求

要求操作便利,一次選擇多個檔案和資料夾進行上傳;
支援PC端全平臺作業系統,Windows,Linux,Mac

支援檔案和資料夾的批量下載,斷點續傳。重新整理頁面後繼續傳輸。關閉瀏覽器後保留進度資訊。

支援資料夾批量上傳下載,伺服器端保留資料夾層級結構,伺服器端資料夾層級結構與本地相同。

支援大檔案批量上傳(20G)和下載,同時需要保證上傳期間使用者電腦不出現卡死等體驗;
支援資料夾上傳,資料夾中的檔案數量達到1萬個以上,且包含層級結構。

支援斷點續傳,關閉瀏覽器或重新整理瀏覽器後仍然能夠保留進度。

支援資料夾結構管理,支援新建資料夾,支援資料夾目錄導航

互動友好,能夠及時反饋上傳的進度;

服務端的安全性,不因上傳檔案功能導致JVM記憶體溢位影響其他功能使用;

最大限度利用網路上行頻寬,提高上傳速度;


二、 設計分析

對於大檔案的處理,無論是使用者端還是服務端,如果一次性進行讀取傳送、接收都是不可取,很容易導致記憶體問題。所以對於大檔案上傳,採用切塊分段上傳

從上傳的效率來看,利用多執行緒併發上傳能夠達到最大效率。


三、解決方案:

檔案上傳頁面的前端可以選擇使用一些比較好用的上傳元件,例如百度的開源元件WebUploader,澤優軟體的up6,這些元件基本能滿足檔案上傳的一些日常所需功能,如非同步上傳檔案,資料夾,拖拽式上傳,黏貼上傳,上傳進度監控,檔案縮圖,甚至是大檔案斷點續傳,大檔案秒傳。 

在web專案中上傳資料夾現在已經成為了一個主流的需求。在OA,或者企業ERP系統中都有類似的需求。上傳資料夾並且保留層級結構能夠對使用者行成很好的引導,使用者使用起來也更方便。能夠提供更高階的應用支撐。

資料夾資料表結構

CREATE TABLE IF NOT EXISTS `up6_folders` (

  `f_id`               char(32) NOT NULL ,

  `f_nameLoc`               varchar(255) default '',

  `f_pid`                   char(32) default '',

  `f_uid`                   int(11) default '0',

  `f_lenLoc`           bigint(19) default '0',

  `f_sizeLoc`               varchar(50) default '0',

  `f_pathLoc`               varchar(255) default '',

  `f_pathSvr`               varchar(255) default '',

  `f_pathRel`               varchar(255) default '',

  `f_folders`               int(11) default '0',

  `f_fileCount`        int(11) default '0',

  `f_filesComplete`    int(11) default '0',

  `f_complete`              tinyint(1) default '0',

  `f_deleted`               tinyint(1) default '0',

  `f_time`                  timestamp NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,

  `f_pidRoot`               char(32) default '',

  PRIMARY KEY  (`f_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

檔案資料表結構

CREATE TABLE IF NOT EXISTS `up6_files` (

  `f_id`               char(32) NOT NULL,

  `f_pid`                   char(32) default '',        /*父級資料夾ID*/

  `f_pidRoot`               char(32) default '',        /*根級資料夾ID*/

  `f_fdTask`           tinyint(1) default '0',     /*是否是一條資料夾資訊*/

  `f_fdChild`               tinyint(1) default '0',     /*是否是資料夾中的檔案*/

  `f_uid`                   int(11) default '0',

  `f_nameLoc`               varchar(255) default '',    /*檔案在本地的名稱(原始檔名稱)*/

  `f_nameSvr`               varchar(255) default '',    /*檔案在伺服器的名稱*/

  `f_pathLoc`               varchar(512) default '',    /*檔案在本地的路徑*/

  `f_pathSvr`               varchar(512) default '',    /*檔案在遠端伺服器中的位置*/

  `f_pathRel`               varchar(512) default '',

  `f_md5`                   varchar(40) default '',     /*檔案MD5*/

  `f_lenLoc`           bigint(19) default '0',     /*檔案大小*/

  `f_sizeLoc`               varchar(10) default '0',    /*檔案大小(格式化的)*/

  `f_pos`                   bigint(19) default '0',     /*續傳位置*/

  `f_lenSvr`           bigint(19) default '0',     /*已上傳大小*/

  `f_perSvr`           varchar(7) default '0%',    /*已上傳百分比*/

  `f_complete`              tinyint(1) default '0',     /*是否已上傳完畢*/

  `f_time`                  timestamp NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,

  `f_deleted`               tinyint(1) default '0',

  `f_scan`                  tinyint(1) default '0',

  PRIMARY KEY  (`f_id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

該專案核心就是檔案分塊上傳。前後端要高度配合,需要雙方約定好一些資料,才能完成大檔案分塊,我們在專案中要重點解決的以下問題。

* 如何分片;

* 如何合成一個檔案;

* 中斷了從哪個分片開始。

如何分,利用強大的js庫,來減輕我們的工作,市場上已經能有關於大檔案分塊的輪子,雖然程式設計師的天性曾迫使我重新造輪子。但是因為時間的關係還有工作的關係,我只能罷休了。最後我選擇了百度的WebUploader來實現前端所需。

如何合,在合之前,我們還得先解決一個問題,我們如何區分分塊所屬那個檔案的。剛開始的時候,我是採用了前端生成了唯一uuid來做檔案的標誌,在每個分片請求上帶上。不過後來在做秒傳的時候我放棄了,採用了Md5來維護分塊和檔案關係。

在服務端合併檔案,和記錄分塊的問題,在這方面其實行業已經給了很好的解決方案了。參考迅雷,你會發現,每次下載中的時候,都會有兩個檔案,一個檔案主體,另外一個就是檔案臨時檔案,臨時檔案儲存著每個分塊對應位元組位的狀態。

這些都是需要前後端密切聯絡才能做好,前端需要根據固定大小對檔案進行分片,並且請求中要帶上分片序號和大小。前端傳送請求順利到達後臺後,伺服器只需要按照請求資料中給的分片序號和每片分塊大小(分片大小是固定且一樣的)算出開始位置,與讀取到的檔案片段資料,寫入檔案即可。

為了便於開發,我 將服務端的業務邏輯進行了如下劃分,分成初始化,塊處理,檔案上傳完畢等。

服務端的業務邏輯模組如下

編輯

功能分析:

資料夾生成模組

編輯

資料夾上傳完畢後由服務端進行掃描程式碼如下

public class fd_scan

{

    DbHelper db;

    Connection con;

    PreparedStatement cmd_add_f = null;

    PreparedStatement cmd_add_fd = null;

    public FileInf root = null;//根節點

   

    public fd_scan()

    {

        this.db = new DbHelper();

        this.con = this.db.GetCon();       

    }

   

    public void makeCmdF()

    {

        StringBuilder sb = new StringBuilder();

        sb.append("insert into up6_files (");

        sb.append(" f_id");//1

        sb.append(",f_pid");//2

        sb.append(",f_pidRoot");//3

        sb.append(",f_fdTask");//4

        sb.append(",f_fdChild");//5

        sb.append(",f_uid");//6

        sb.append(",f_nameLoc");//7

        sb.append(",f_nameSvr");//8

        sb.append(",f_pathLoc");//9

        sb.append(",f_pathSvr");//10

        sb.append(",f_pathRel");//11

        sb.append(",f_md5");//12

        sb.append(",f_lenLoc");//13

        sb.append(",f_sizeLoc");//14

        sb.append(",f_lenSvr");//15

        sb.append(",f_perSvr");//16

        sb.append(",f_complete");//17

       

        sb.append(") values(");

       

        sb.append(" ?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(")");

        try {

            this.cmd_add_f = this.con.prepareStatement(sb.toString());

            this.cmd_add_f.setString(1, "");//id

            this.cmd_add_f.setString(2, "");//pid

            this.cmd_add_f.setString(3, "");//pidRoot

            this.cmd_add_f.setBoolean(4, true);//fdTask

            this.cmd_add_f.setBoolean(5, false);//f_fdChild

            this.cmd_add_f.setInt(6, 0);//f_uid

            this.cmd_add_f.setString(7, "");//f_nameLoc

            this.cmd_add_f.setString(8, "");//f_nameSvr

            this.cmd_add_f.setString(9, "");//f_pathLoc

            this.cmd_add_f.setString(10, "");//f_pathSvr

            this.cmd_add_f.setString(11, "");//f_pathRel

            this.cmd_add_f.setString(12, "");//f_md5

            this.cmd_add_f.setLong(13, 0);//f_lenLoc

            this.cmd_add_f.setString(14, "");//f_sizeLoc

            this.cmd_add_f.setLong(15, 0);//f_lenSvr            

            this.cmd_add_f.setString(16, "");//f_perSvr

            this.cmd_add_f.setBoolean(17, true);//f_complete

        } catch (SQLException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

   

    public void makeCmdFD()

    {

        StringBuilder sb = new StringBuilder();

        sb.append("insert into up6_folders (");

        sb.append(" f_id");//1

        sb.append(",f_pid");//2

        sb.append(",f_pidRoot");//3

        sb.append(",f_nameLoc");//4

        sb.append(",f_uid");//5

        sb.append(",f_pathLoc");//6

        sb.append(",f_pathSvr");//7

        sb.append(",f_pathRel");//8

        sb.append(",f_complete");//9

        sb.append(") values(");//

        sb.append(" ?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(",?");

        sb.append(")");

        try {

            this.cmd_add_fd = this.con.prepareStatement(sb.toString());

            this.cmd_add_fd.setString(1, "");//id

            this.cmd_add_fd.setString(2, "");//pid

            this.cmd_add_fd.setString(3, "");//pidRoot

            this.cmd_add_fd.setString(4, "");//name

            this.cmd_add_fd.setInt(5, 0);//f_uid

            this.cmd_add_fd.setString(6, "");//pathLoc

            this.cmd_add_fd.setString(7, "");//pathSvr

            this.cmd_add_fd.setString(8, "");//pathRel

            this.cmd_add_fd.setBoolean(9, true);//complete

        } catch (SQLException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

   

    protected void GetAllFiles(FileInf inf,String root)

    {

        File dir = new File(inf.pathSvr);

        File [] allFile = dir.listFiles();

        for(int i = 0; i < allFile.length; i++)

        {

            if(allFile[i].isDirectory())

            {

                FileInf fd = new FileInf();

                String uuid = UUID.randomUUID().toString();

                uuid = uuid.replace("-", "");

                fd.id = uuid;

                fd.pid = inf.id;

                fd.pidRoot = this.root.id;

                fd.nameSvr = allFile[i].getName();

                fd.nameLoc = fd.nameSvr;

                fd.pathSvr = allFile[i].getPath();

                fd.pathSvr = fd.pathSvr.replace("\\", "/");

                fd.pathRel = fd.pathSvr.substring(root.length() + 1);

                fd.perSvr = "100%";

                fd.complete = true;

                this.save_folder(fd);

               

                this.GetAllFiles(fd, root);

            }

            else

            {

                FileInf fl = new FileInf();

                String uuid = UUID.randomUUID().toString();

                uuid = uuid.replace("-", "");

                fl.id = uuid;

                fl.pid = inf.id;

                fl.pidRoot = this.root.id;

                fl.nameSvr = allFile[i].getName();

                fl.nameLoc = fl.nameSvr;

                fl.pathSvr = allFile[i].getPath();

                fl.pathSvr = fl.pathSvr.replace("\\", "/");

                fl.pathRel = fl.pathSvr.substring(root.length() + 1);

                fl.lenSvr = allFile[i].length();

                fl.lenLoc = fl.lenSvr;

                fl.perSvr = "100%";

                fl.complete = true;

                this.save_file(fl);

            }

        }

    }

   

    protected void save_file(FileInf f)

    {      

        try {

            this.cmd_add_f.setString(1, f.id);//id

            this.cmd_add_f.setString(2, f.pid);//pid

            this.cmd_add_f.setString(3, f.pidRoot);//pidRoot

            this.cmd_add_f.setBoolean(4, f.fdTask);//fdTask

            this.cmd_add_f.setBoolean(5, true);//f_fdChild

            this.cmd_add_f.setInt(6, f.uid);//f_uid

            this.cmd_add_f.setString(7, f.nameLoc);//f_nameLoc

            this.cmd_add_f.setString(8, f.nameSvr);//f_nameSvr

            this.cmd_add_f.setString(9, f.pathLoc);//f_pathLoc

            this.cmd_add_f.setString(10, f.pathSvr);//f_pathSvr

            this.cmd_add_f.setString(11, f.pathRel);//f_pathRel

            this.cmd_add_f.setString(12, f.md5);//f_md5

            this.cmd_add_f.setLong(13, f.lenLoc);//f_lenLoc

            this.cmd_add_f.setString(14, f.sizeLoc);//f_sizeLoc

            this.cmd_add_f.setLong(15, f.lenSvr);//f_lenSvr        

            this.cmd_add_f.setString(16, f.perSvr);//f_perSvr

            this.cmd_add_f.setBoolean(17, f.complete);//f_complete

            this.cmd_add_f.executeUpdate();

        } catch (SQLException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }//

    }

   

    protected void save_folder(FileInf f)

    {

        try {

            this.cmd_add_fd.setString(1, f.id);//id

            this.cmd_add_fd.setString(2, f.pid);//pid

            this.cmd_add_fd.setString(3, f.pidRoot);//pidRoot

            this.cmd_add_fd.setString(4, f.nameSvr);//name

            this.cmd_add_fd.setInt(5, f.uid);//f_uid

            this.cmd_add_fd.setString(6, f.pathLoc);//pathLoc

            this.cmd_add_fd.setString(7, f.pathSvr);//pathSvr

            this.cmd_add_fd.setString(8, f.pathRel);//pathRel

            this.cmd_add_fd.setBoolean(9, f.complete);//complete

            this.cmd_add_fd.executeUpdate();

        } catch (SQLException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

    }

   

    public void scan(FileInf inf, String root) throws IOException, SQLException

    {

        this.makeCmdF();

        this.makeCmdFD();

        this.GetAllFiles(inf, root);

        this.cmd_add_f.close();

        this.cmd_add_fd.close();

        this.con.close();

    }

}

分塊上傳,分塊處理邏輯應該是最簡單的邏輯了,up6已經將檔案進行了分塊,並且對每個分塊資料進行了標識,這些標識包括檔案塊的索引,大小,偏移,檔案MD5,檔案塊MD5(需要開啟)等資訊,服務端在接收這些資訊後便可以非常方便的進行處理了。比如將塊資料儲存到分散式儲存系統中

分塊上傳可以說是我們整個專案的基礎,像斷點續傳、暫停這些都是需要用到分塊。

分塊這塊相對來說比較簡單。前端是採用了webuploader,分塊等基礎功能已經封裝起來,使用方便。

藉助webUpload提供給我們的檔案API,前端就顯得異常簡單。

前臺HTML模板

this.GetHtmlFiles = function()

{

     var acx = "";

     acx += '<div class="file-item" id="tmpFile" name="fileItem">\

                <div class="img-box"><img name="file" src="js/file.png"/></div>\

                   <div class="area-l">\

                       <div class="file-head">\

                            <div name="fileName" class="name">HttpUploader程式開發.pdf</div>\

                            <div name="percent" class="percent">(35%)</div>\

                            <div name="fileSize" class="size" child="1">1000.23MB</div>\

                    </div>\

                       <div class="process-border"><div name="process" class="process"></div></div>\

                       <div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\

                   </div>\

                   <div class="area-r">\

                    <span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\

                    <span class="btn-box hide" name="post" title="繼續"><img name="post" src="js/post.png"/><div>繼續</div></span>\

                       <span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\

                       <span class="btn-box hide" name="del" title="刪除"><img name="del" src="js/del.png"/><div>刪除</div></span>\

                   </div>';

     acx += '</div>';

     acx += '<div class="file-item" name="folderItem">\

                   <div class="img-box"><img name="folder" src="js/folder.png"/></div>\

                   <div class="area-l">\

                       <div class="file-head">\

                            <div name="fileName" class="name">HttpUploader程式開發.pdf</div>\

                            <div name="percent" class="percent">(35%)</div>\

                            <div name="fileSize" class="size" child="1">1000.23MB</div>\

                    </div>\

                       <div class="process-border top-space"><div name="process" class="process"></div></div>\

                       <div name="msg" class="msg top-space">15.3MB 20KB/S 10:02:00</div>\

                   </div>\

                   <div class="area-r">\

                    <span class="btn-box" name="cancel" title="取消"><img name="stop" src="js/stop.png"/><div>取消</div></span>\

                    <span class="btn-box hide" name="post" title="繼續"><img name="post" src="js/post.png"/><div>繼續</div></span>\

                       <span class="btn-box hide" name="stop" title="停止"><img name="stop" src="js/stop.png"/><div>停止</div></span>\

                       <span class="btn-box hide" name="del" title="刪除"><img name="del" src="js/del.png"/><div>刪除</div></span>\

                   </div>';

     acx += '</div>';

     acx += '<div class="files-panel" name="post_panel">\

                   <div name="post_head" class="toolbar">\

                       <span class="btn" name="btnAddFiles">選擇多個檔案</span>\

                       <span class="btn" name="btnAddFolder">選擇資料夾</span>\

                       <span class="btn" name="btnPasteFile">貼上檔案和目錄</span>\

                       <span class="btn" name="btnSetup">安裝控制元件</span>\

                   </div>\

                   <div class="content" name="post_content">\

                       <div name="post_body" class="file-post-view"></div>\

                   </div>\

                   <div class="footer" name="post_footer">\

                       <span class="btn-footer" name="btnClear">清除已完成檔案</span>\

                   </div>\

              </div>';

     return acx;

};

分則必合。把大檔案分片了,但是分片了就沒有原本檔案功能,所以我們要把分片合成為原本的檔案。我們只需要把分片按原本位置寫入到檔案中去。因為前面原理那一部我們已經講到了,我們知道分塊大小和分塊序號,我就可以知道該分塊在檔案中的起始位置。所以這裡使用RandomAccessFile是明智的,RandomAccessFile能在檔案裡面前後移動。但是在andomAccessFile的絕大多數功能,已經被JDK1.4的NIO的“記憶體對映檔案(memory-mapped files)”取代了。我在該專案中分別寫了使用RandomAccessFile與MappedByteBuffer來合成檔案。分別對應的方法是uploadFileRandomAccessFile和uploadFileByMappedByteBuffer。兩個方法程式碼如下。

秒傳功能

服務端邏輯

秒傳功能,相信大家都體現過了,網盤上傳的時候,發現上傳的檔案秒傳了。其實原理稍微有研究過的同學應該知道,其實就是檢驗檔案MD5,記錄下上傳到系統的檔案的MD5,在一個檔案上傳前先獲取檔案內容MD5值或者部分取值MD5,然後在匹配系統上的資料。

Breakpoint-http實現秒傳原理,客戶端選擇檔案之後,點選上傳的時候觸發獲取檔案MD5值,獲取MD5後呼叫系統一個介面(/index/checkFileMd5),查詢該MD5是否已經存在(我在該專案中用redis來儲存資料,用檔案MD5值來作key,value是檔案儲存的地址。)介面返回檢查狀態,然後再進行下一步的操作。相信大家看程式碼就能明白了。

嗯,前端的MD5取值也是用了webuploader自帶的功能,這還是個不錯的工具。

控制元件計算完檔案MD5後會觸發md5_complete事件,並傳值md5,開發者只需要處理這個事件即可,

斷點續傳

up6已經自動對斷點續傳進行了處理,不需要開發都再進行單獨的處理。

在f_post.jsp中接收這些引數,並進行處理,開發者只需要關注業務邏輯,不需要關注其它的方面。

斷點續傳,就是在檔案上傳的過程中發生了中斷,人為因素(暫停)或者不可抗力(斷網或者網路差)導致了檔案上傳到一半失敗了。然後在環境恢復的時候,重新上傳該檔案,而不至於是從新開始上傳的。

前面也已經講過,斷點續傳的功能是基於分塊上傳來實現的,把一個大檔案分成很多個小塊,服務端能夠把每個上傳成功的分塊都落地下來,客戶端在上傳檔案開始時呼叫介面快速驗證,條件選擇跳過某個分塊。

實現原理,就是在每個檔案上傳前,就獲取到檔案MD5取值,在上傳檔案前呼叫介面(/index/checkFileMd5,沒錯也是秒傳的檢驗介面)如果獲取的檔案狀態是未完成,則返回所有的還沒上傳的分塊的編號,然後前端進行條件篩算出哪些沒上傳的分塊,然後進行上傳。

當接收到檔案塊後就可以直接寫入到伺服器的檔案中

這是資料夾上傳完後的效果

編輯

這是資料夾上傳完後在服務端的儲存結構

編輯

參考文章:http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/

歡迎入群一起討論“374992201”