分片並發上傳

㈠ 求jsp文件分片上傳,斷點續傳的方法

無組件斷點續傳.gif
1. 組件簡介
webuploader：是一個以HTML5為主， Flash為輔的文件上傳組件，採用大文件分片/並發上傳的方式，極大地提高了文件上傳的效率，同時兼容多種瀏覽器版本；
2. 項目背景簡介
本篇文章的背景，是在上一篇文章(《無組件實現大文件分片上傳，斷點續傳》)的項目背景下進行的一次嘗試，所以本篇文章還是基於上一篇文章的背景，但是不會介紹視頻基本信息(視頻標題、簡介、播出時間等)的操作，主要介紹文件的上傳。因為項目的特殊需求，這種使用插進的方式最終沒有被採用，因為一些控制項無法做到定製化。
上一篇文章(《無組件實現大文件分片上傳，斷點續傳》)中介紹的文件上傳方式，在前端主要採用純javaScript來進行文件切分、驗證，後台主要採用了NIO的方式進行分片的追加。而在這篇文章中，將介紹前端採用webuploader，後台採用臨時目錄+傳統I/O方式進行分片合並的方式。
3. 技術實現
3.1 組件引入
在webuploader官網下載必要的文件，放入項目中。在頁面中進行引入；

0_組件引入.png

<!-- webuploader文件上傳 -->
<script src="static/webuploader/webuploader.nolog.min.js"></script>
<link href="static/webuploader/webuploader.css" rel="stylesheet" type="text/css" />

3.2 前端頁面實現
在前端頁面中，可以不用關心css樣式，但需要注意標簽的id/nama屬性，這些將在後面的JavaScript中使用到。

㈡ iOS大文件的分片上傳和斷點上傳

由於最近比較忙，所以一直沒有寫博客，現在分享一些大文件的上傳的問題！斷點續傳和分片上傳。因為文件過大（比如1G以上），必須要考慮上傳過程網路中斷的情況。http的網路請求中本身就已經具備了分片上傳功能，當傳輸的文件比較大時，http協議自動會將文件切片（分塊），但這不是我們現在說的重點，我們要做的事是保證在網路中斷後1G的文件已上傳的那部分在下次網路連接時不必再重傳。所以我們本地在上傳的時候，要將大文件進行分片，比如分成1024*1024B，即將大文件分成1M的片進行上傳，伺服器在接收後，再將這些片合並成原始文件，這就是分片的基本原理。斷點續傳要求本地要記錄每一片的上傳的狀態，我通過三個狀態進行了標記（wait loading finish），當網路中斷，再次連接後，從斷點處進行上傳。伺服器通過文件名、總片數判斷該文件是否已全部上傳完成。

下面來說細節：

1、首先獲取文件（音視頻、圖片）

分兩種情況，一種是在相冊庫里直接獲取，一種是調用相機。如果是通過UIImagePickerView來獲取（細節不詳述，網上一大堆），我們會發現當你選定一個視頻的時候，會出現圖1的壓縮頁面，最後我們的app獲取的視頻就是這個經過壓縮後的視頻（不是視頻庫里的原始視頻，這里有個注意點，操作完該壓縮視頻後記得釋放，系統不會幫你釋放的，需要你手動來操作，下面會說到），然後通過UIImagePickerView的協議方法中的- (void)imagePickerController:(UIImagePickerController*)picker didFinishPickingMediaWithInfo:(NSDictionary*)info獲取視頻的Info

fileInfo = {

= "public.movie";

= "file:///private/var/mobile/Containers/Data/Application/2AAE9E44-0E6D-4499-9AC3-93D44D8342EA/tmp/trim.F36EC46C-4219-43C8-96A7-FA7141AB64D2.MOV";

= "assets-library://asset/asset.MOV?id=DEDA9406-3223-4F87-ABB2-98FB5F5EB9C4&ext=MOV";

}

是選取文件的類型，如KUTTypeImage，KUTTypeMovie。這里注意一下movie和video的區別，一個是有聲音的視頻文件，一個是沒有聲音的視頻文件，當然還有Audio是只有聲音沒有視頻。是視頻的URL（如果是相機拍攝的，那麼這個就是原始拍攝得到的視頻；如果是在相冊庫里選擇的，那就是壓縮之後生成的視頻），注意這個URL不指向相冊庫，通過這個URL你可以操作這個視頻如刪除，拷貝等，可以獲取壓縮後的視頻的大小。是一個指向相冊的URL，官方的解釋是an NSURL that references an asset in the AssetsLibrary framework，通過這個URL，你可以獲取視頻的所有信息，包括文件名，縮略圖，時長等（通過ALAssetsLibrary里的assetsLibraryassetForURL:referenceURLresultBlock:）。

如果是相機拍攝的，注意兩個保存方法：圖片保存到相冊:UIImageJPEGRepresentation([infovalueForKey:],(CGFloat)1.0)metadata:nilcompletionBlock: failureBlock:

高保真壓縮圖片的方法NSData * UIImageJPEGRepresentation ( UIImage *image, CGFloat compressionQuality）

視頻保存到相冊：:MediaURL completionBlock:failureBlock：

到這里，我們就獲取了所有需要的文件以及文件信息。下面要做的就是將文件分片。

2、將獲取到的文件分片

首先，我將獲取到的文件保存在這這樣一個類中

@interface CNFile :NSObject

@property(nonatomic,)NSString* fileType;//image or movie

@property(nonatomic,)NSString* filePath;//文件在app中路徑

@property(nonatomic,)NSString* fileName;//文件名

@property(nonatomic,assign)NSIntegerfileSize;//文件大小

@property (nonatomic,assign)NSIntegertrunks;//總片數

@property(nonatomic,)NSString* fileInfo;

@property(nonatomic,strong)UIImage* fileImage;//文件縮略圖

@property(nonatomic,strong) NSMutableArray* fileArr;//標記每片的上傳狀態

@end

這樣我們就可以對每一個CNFile對象進行操作了。

-(void)readDataWithChunk:(NSInteger)chunk file:(CNFile*)file{

總片數的獲取方法：

intoffset =1024*1024;（每一片的大小是1M）

NSIntegerchunks = (file.fileSize%1024==0)?((int)(file.fileSize/1024*1024)):((int)(file.fileSize/(1024*1024) +1));

NSLog(@"chunks = %ld",(long)chunks);

將文件分片，讀取每一片的數據：

NSData* data;

NSFileHandle*readHandle = [:file.filePath];

[readHandleseekToFileOffset:offset * chunk];

data = [readHandlereadDataOfLength:offset];

}

這樣我們就獲取了每一片要上傳的數據，然後詢問伺服器，該片是否已經存在

（方法-(void)ifHaveData:(NSData*)data WithChunk:(NSInteger)chunk file:(CNFile*)file）

，如果存在，令chunk+1，重復上面的方法讀取下一片，直到伺服器不存在該片，那麼上傳該片數據。在這個方法中注意設置該chunk的上傳狀態（wait loading finish），這將關繫到本地判斷該文件是否已全部上傳完成。

下一步就是上傳的過程：

-(void)uploadData:(NSData*) data WithChunk:(NSInteger) chunk file:(CNFile*)file；

在伺服器返回該片上傳成功後，我們要做的事有很多：

1）先將已經成功上傳的本片的flag置finish

[file.fileArrreplaceObjectAtIndex:chunk withObject:@「finish"];

2）查看是否所有片的flag都已經置finish，如果都已經finishi，說明該文件上傳完成，那麼刪除該文件，上傳下一個文件或者結束。

for(NSIntegerj =0; j

if(j == chunks || ((j == chunks -1)&&([file.fileArr[j]isEqualToString:@"finish"])))

[medeleteFile:file.filePath];

[mereadNextFile];

}

3）如果沒有都finish，那麼看本地下一chunk對用的flag是否是wait

NSLog(@"查看第%ld片的狀態",chunk+1);

for(NSIntegeri = chunk+1;i < chunks;i++)

{

NSString* flag = [file.fileArrobjectAtIndex:i];

if([flagisEqualToString:@"wait"]) {

[mereadDataWithChunk:ifileName:fileNamefile:file];

break;

}

}

在第2、3步之間可以有一個 2.5）判斷是否暫停上傳

if(me.isPause ==YES)

{

//將目前讀到了第幾個文件的第幾片保存到本地

[selfsaveProgressWithChunk:chunk file:file];

return;

}

這個操作實際上和上傳過程中斷網是一樣的，為了斷點續傳，在斷網或者暫停的時候，我們要將目前的進度保存起來，以便下次上傳時略過前面已置finish的片。

然後還有一個問題，如果我們就這樣線性的一片一片上傳，實際上失去了分片上傳的意義，應該結合多線程，使分片上傳過程並發執行，同時上傳多片，這樣就提高了上傳效率，並充分利用了網路帶寬。

dispatch_async(dispatch_queue_t queue, ^{

[mereadDataWithChunk: chunk];

})

最後注意一下，每上傳完一個視頻，去設置里看看你的app佔用的存儲空間有沒有增大哦，如果你沒有處理那個生成的壓縮視頻，你會發現你的app的空間佔用量是很大的。

站在大牛的肩膀上開發。

㈢ 斷點續傳

1、文件過大會導致帶寬資源緊張，請求速度下降 ；
2、如果上傳過程中服務中斷、網路中斷 、頁面崩潰，可能會導致文件重新開始上傳。

前端選擇文件後上傳，後端在處理文件過程中，首先會將文件載入到 運行內存中 ，之後再調用相應的API進行 寫入硬碟 內存的操作，完成整個文件的上傳。

但這樣直接上傳文件，可能會因為某個環節出了問題導致整個流程的雪崩，所以大文件直接上傳是不可取的。

解決問題最好辦法是 分片斷點續傳 ，該方式主要是針對 大文件（比如100M以上的文件） 。

顧名思義就是 斷點 和 續傳

在文件上傳過程中，將一個要上傳的文件 分成N塊 ，然後使用 多線程並發多塊上傳 ，因為某種原因導致上傳被中斷或暫停，此時中斷或暫停的位置就成為 斷點 。

前端每上傳一片，將會被載入到 運行內存中 ，載入完畢後再寫入硬碟，此時運行內存的臨時變數會被釋放，然後此臨時變數會被下一片佔用，再進行寫入，釋放...

意思是指從中斷的位置繼續上傳剩下的部分文件，而不是從頭開始上傳。

上傳完畢後，在服務端進行合並（合並的操作是在後端進行的，前端只是調用介面，合並的方式是由後端決定的，到底是上傳一片就合並一片，或者是上傳所有的之後整體進行合並）。

方式：
html5z之前的方式是 flash 和 activeX
html5提供了文件二進制流進行分割的slice方法。

文件的分片，一般在2-5M之間。這一步得到了每一片文件的內容、每一塊的序號、每一塊的大小、總塊數等數據。

這里提供了兩個方法；一種是用SparkMD5.hashBinary( ) 直接將整個文件的二進制碼傳入直接返迴文件的md5、這種方法對於小文件會比較有優勢——簡單並且速度快。
另一種方法是利用js中File對象的slice( )方法（File.prototype.slice( )）將文件分片後逐個傳入spark.appendBinary( )方法來計算、最後通過spark.end( )方法輸出結果，很明顯，這種方法對於大型文件會非常有利——不容易出錯，並且能夠提供計算的進度信息

第一種方式：

第二種方式

㈣ 前端大文件分片上傳（Vue）

list.vue

comUpload.js

前端git項目
後端git地址
鏈接地址

㈤ Android上大文件分片上傳 具體怎麼弄

正常情況下，一般都是在長傳完成後，在伺服器直接保存。

?

1
2
3
4
5
6
7

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//保存文件
context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
context.Response.Write("Hello World");
}

最近項目中用網路開源的上傳組件webuploader，官方介紹webuploader支持分片上傳。具體webuploader的使用方法見官網http://fex..com/webuploader/。

?

1
2
3
4
5
6
7
8
9
10
11
12

var uploader = WebUploader.create({
auto: true,
swf:'/webuploader/Uploader.swf',
// 文件接收服務端。
server: '/Uploader.ashx',
// 內部根據當前運行是創建，可能是input元素，也可能是flash.
pick: '#filePicker',
chunked: true,//開啟分片上傳
threads: 1,//上傳並發數
//由於Http的無狀態特徵，在往伺服器發送數據過程傳遞一個進入當前頁面是生成的GUID作為標示
formData: {guid:"<%=Guid.NewGuid().ToString()%>"}
});

webuploader的分片上傳是把文件分成若干份，然後向你定義的文件接收端post數據，如果上傳的文件大於分片的尺寸，就會進行分片，然後會在post的數據中添加兩個form元素chunk和chunks,前者標示當前分片在上傳分片中的順序（從0開始），後者代表總分片數。

㈥ 前端分片上傳

需求描述： 前端獲取文件md5碼且實現分片上傳

步驟：

一：獲取文件md5

    1.插件spark-md5，還有另外一個插件（browser-md5-file）但是不兼容ie11，至於其他ie版本，未測

    2.以分片的方式獲取文件MD5碼，一下為封裝的方法：

 /**

   * @param file 文件

   * @param chunkSize 分片大小

   * @returns Promise

   */

  const getFileMd5 = (file, chunkSize) => {

    return new Promise((resolve, reject) => {

      setSpin({

        spinning: true,

        tip: '正在努力導入應用數據，請耐心等待......',

      });

      let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

      let chunks = Math.ceil(file.size / chunkSize); // 總分片數

      let currentChunk = 0; 

      let spark = new SparkMD5.ArrayBuffer();

      let fileReader = new FileReader();

      fileReader.onload = function(e) {

        spark.append(e.target.result);

        currentChunk++;

        if (currentChunk < chunks) {

          loadNext();

        } else {

          let md5 = spark.end(); // 結束時調用

          resolve(md5);

        }

      };

      fileReader.onerror = function(e) {

        reject(e);

      };

      // 文件分片

      function loadNext() {

        let start = currentChunk * chunkSize;

        let end = start + chunkSize;

        if (end > file.size) {

          end = file.size;

        }

        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));

      }

      loadNext();

    });

  }

二、文件分片調取介面

  /**

   *

   * @param {Object} file 文件

   * @param {Number} index 下標

   * @param {Number} chunkSize 分片數

   * @param {String} md5 md5碼

   */

  const fileImport = (file, index, chunkSize, md5) => { // 獲取MD5

    const chunks = Math.ceil(file.size / chunkSize); // 防止文件截取不完整 所以向上取整

    if (file) {

      let upSize = index * chunkSize;

      if (index > chunks - 1) {

        return;

      }

      let blob = file.slice(upSize, upSize + chunkSize); // 截取文件

      try {

        let formData = new FormData();

        formData.append('file', blob);

        formData.append('md5', md5);

        formData.append('chunk', index);

        formData.append('chunks', chunks);

        sliceImportVisualization(formData).then(async res => {

          if (res?.isSuccess) {

            await fileImport(file, ++index, chunkSize, md5); // 在上一片傳輸完成後再調用 切記 切記

            const { data = {} } = res;

            const { file_name } = data;

            if (file_name) {

              importVisualization({ file_name }).then(res => {

                setSpin({spinning: false});

              });

            }

          }

        });

      } catch (err) {

        console.log('分片上傳錯誤...', err);

      }

    }

  };

㈦ js 大文件分片上傳處理如何實現

推薦採用webuploader控制項來解決。
關於WebUploader的功能說明：
大文件上傳續傳
支持超大文件上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,php示例和源代碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例代碼。
分片、並發
分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。
當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
預覽、壓縮
支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。上傳本地指定路徑的文件，不需要通過點擊按鈕選擇文件。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。
HTML5 & FLASH
兼容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。而且支持IE6，IE8瀏覽器。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
基於內存映射模式進行IO操作，充分發揮操作系統性能。
MD5秒傳
當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
易擴展、可拆分
採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。
採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。

㈧ PHP實現瀏覽器端大文件分片上傳如何實現

分片上傳的原理就是通過切割上傳文件，然後在瀏覽器的頭部通過etag來進行劃分文件傳輸，伺服器端接收到文件片段和分割起始符之後，進行拼接文件，最後合成一個大文件。

你可以自己通過php來獲取瀏覽器頭部傳輸標志來進行文件的拼接組裝，也可以通過現有的大文件傳輸類來上傳文件。

關鍵點

記住分割文件點，也就是分割文件的順序，拼接文件需要通過etag按照順序拼接，分片可以並發傳輸，這其實也是並發下載的原理。

㈨ web uploader的demo怎樣導入css文件

WebUploader通過准備dom結構、初始化、顯示用戶選擇、文件上傳進度、提示信息實現導入JS, CSS, SWF資源。

WebUploader的demo導入css等資源的流程：

1. WebUploader概述：WebUploader是由Bai WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。WebUploader文件上傳組件在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。 採用大文件分片並發上傳，極大的提高了文件上傳效率。

2. 功能介紹：

   A、分片、並發：分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。

   B、分片、並發：分片與並發結合，將一個大文件分割成多塊，並發上傳，極大地提高大文件的上傳速度。

   當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

   C、預覽、壓縮：支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路數據傳輸。

   解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。

   D、多途徑添加文件：支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。

   粘貼功能主要體現在當有圖片數據在剪切板中時，Ctrl + V便可添加此圖片文件。

   E、HTML5 & FLASH：兼容主流瀏覽器，介面一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。

   同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。

   F、MD5秒傳：當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。

   如果服務端與前端統一修改演算法，取段md5，可大大提升驗證性能，耗時在20ms左右。

   G、易擴展、可拆分：採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。

   採用AMD規范組織代碼，清晰明了，方便高級玩家擴展。

   H、引入資源：使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。

   <!--引入CSS-->
   <linkrel="stylesheet"type="text/css"href="webuploader文件夾/webuploader.css">
   <!--引入JS-->
   <scripttype="text/javascript"src="webuploader文件夾/webuploader.js"></script>
   <!--SWF在初始化的時候指定-->

3. 文件上傳:WebUploader只包含文件上傳的底層實現，不包括UI部分。所以交互方面可以自由發揮。

   A、Html部分。首先准備dom結構，包含存放文件信息的容器、選擇按鈕和上傳按鈕三個部分。

   <divid="uploader"class="wu-example">
   <!--用來存放文件信息-->
   <divid="thelist"class="uploader-list"></div>
   <divclass="btns">
   <divid="picker">選擇文件</div>
   <buttonid="ctlBtn"class="btnbtn-default">開始上傳</button>
   </div>
   </div>

   B、初始化Web Uploader，具體說明，請看一下代碼中的注釋部分。

   varuploader=WebUploader.create({
   //swf文件路徑
   swf:BASE_URL+'/js/Uploader.swf',
   //文件接收服務端。
   server:'Url/fileupload.php',
   //選擇文件的按鈕。可選。
   //內部根據當前運行是創建，可能是input元素，也可能是flash.
   pick:'#picker',
   //不壓縮image,默認如果是jpeg，文件上傳前會壓縮一把再上傳！
   resize:false
   });

   C、顯示用戶選擇。由於webuploader不處理UI邏輯，所以需要去監聽fileQueued事件來實現。
   

   D、文件上傳進度。文件上傳中，Web Uploader會對外派送uploadProgress事件，其中包含文件對象和該文件當前上傳進度。

   E、文件成功、失敗處理。文件上傳失敗會派送uploadError事件，成功則派送uploadSuccess事件。不管成功或者失敗，在文件上傳完後都會觸發uploadComplete事件。

4. 創建Web Uploader實例
   

   //初始化WebUploader
   varuploader=WebUploader.create({
   //選完文件後，是否自動上傳。
   auto:true,
   //swf文件路徑
   swf:BASE_URL+'/js/Uploader.swf',
   //文件接收服務端。
   server:'http://webuploader.app.com/server/fileupload.php',
   //選擇文件的按鈕。可選。
   //內部根據當前運行是創建，可能是input元素，也可能是flash.
   pick:'#filePicker',
   //只允許選擇圖片文件。
   accept:{
   title:'Images',
   extensions:'gif,jpg,jpeg,bmp,png',
   mimeTypes:'image/*'
   }
   });

附：

1. 監聽fileQueued事件，通過uploader.makeThumb來創建圖片預覽圖。PS: 這里得到的是Data URL數據，IE6、IE7不支持直接預覽。可以藉助FLASH或者服務端來完成預覽。

2. 然後剩下的就是上傳狀態提示了，當文件上傳過程中, 上傳成功，上傳失敗，上傳完成都分別對應uploadProgress,uploadSuccess, uploadError, uploadComplete事件。
   

㈩ webuploader分片上傳的實現代碼（前後端分離）

本文介紹了webuploader分片上傳的實現代碼（前後端分離），分享給大家，具體如下：
WebUploader是由Bai
WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS
6+,
android
4+。兩套運行時，同樣的調用方式，可供用戶任意選用。採用大文件分片並發上傳，極大的提高了文件上傳效率。(這個是從官網上直接的解釋)
功能描述
1、webuploader是網路研發的上傳組件，文檔不是特別規整，但是也夠用了。
2、前端使用官網的上傳圖片demo，在此基礎上代碼略微調整做分片。既可以上傳圖片也可以上傳文件。文件超過分片大小才啟用分片。
3、分片上傳已做md5校驗，達到秒傳的效果。分片以後需要合並，可以先分片後合並，也可以邊分片邊合並，本示例採用的是邊分片邊合並的方案。
4、後端用springboot做框架搭建。springMVC做rest服務，開啟跨域訪問。
5、容器用springboot內置的tomcat插件，運行Application的main方法即可啟動服務；
顯示效果
關鍵代碼前端
WebUploader.Uploader.register({
'name':
'webUploaderHookCommand',
'before-send-file':
'beforeSendFile',
"before-send":
"beforeSend"
},
{
beforeSendFile:
function(file)
{
var
task
=
new
WebUploader.Deferred();
fileName
=
file.name;
fileSize
=
file.size;
(new
WebUploader.Uploader()).md5File(file,
0,
10
*
1024
*
1024).progress(function(percentage)
{}).then(function(val)
{
fileMd5
=
val;
var
url
=
checkUrl;
var
data
=
{
type:
0,
fileName:
fileName,
fileMd5:
fileMd5,
fileSize:
fileSize
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json",
error:
function(XMLHttpRequest,
textStatus,
errorThrown)
{
file.statusText
=
'server_error';
task.reject();
}
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0)
{
if(data.obj
==
1)
{
file.statusText
=
'file_existed';
task.reject();
}
else
{
task.resolve();
}
}
else
{
task.reject();
}
});
});
return
task.promise();
},
beforeSend:
function(block)
{
var
task
=
new
WebUploader.Deferred();
var
url
=
checkUrl;
var
data
=
{
type:
1,
fileName:
fileName,
fileMd5:
fileMd5,
chunk:
block.chunk,
fileSize:
block.end
-
block.start
};
$.ajax({
type:
"POST",
url:
url,
data:
data,
cache:
false,
async:
false,
//
同步
timeout:
1000,
//
todo
超時的話，只能認為該分片未上傳過
dataType:
"json"
}).then(function(data,
textStatus,
jqXHR)
{
if(data.rtn
==
0
&&
data.obj
==
1)
{
task.reject();
//
分片存在，則跳過上傳
}
else
{
task.resolve();
}
});
this.owner.options.formData.fileMd5
=
fileMd5;
this.owner.options.formData.chunkSize
=
chunkSize;
return
task.promise();
}
});
//
實例化
uploader
=
WebUploader.create({
pick:
{
id:
'#filePicker',
label:
'點擊選擇文件'
},
formData:
{
uid:
123
},
dnd:
'#dndArea',
//指定文件拖拽的區域
paste:
'#uploader',
//指定監聽paste事件的容器，如果不指定，不啟用此功能。此功能為通過粘貼來添加截屏的圖片。建議設置為document.body.
swf:
'../plugins/webuploader/Uploader.swf',
chunked:
true,
chunkSize:
chunkSize,
chunkRetry:
false,
threads:
1,
server:
uploadUrl,
//
runtimeOrder:
'flash',
//
accept:
{
//
title:
'Images',
//
extensions:
'gif,jpg,jpeg,bmp,png',
//
mimeTypes:
'image/*'
//
},
//
禁掉全局的拖拽功能。這樣不會出現圖片拖進頁面的時候，把圖片打開。
disableGlobalDnd:
true,
fileNumLimit:
300
//限制多文件上傳的個數
//fileSizeLimit:
200
*
1024
*
1024,
//
限制所有文件的大小
200
M
//fileSingleSizeLimit:
50
*
1024
*
1024
//
限制單個文件的大小
50
M
});
後端
import
java.io.File;
import
java.io.IOException;
import
org.slf4j.Logger;
import
org.slf4j.LoggerFactory;
import
org.springframework.beans.factory.annotation.Value;
import
org.springframework.stereotype.Service;
import
org.springframework.web.multipart.MultipartFile;
import
com.bear.upload.util.FileUtil;
import
com.bear.upload.util.RETURN;
import
com.bear.upload.vo.CheckMd5FileVO;
import
com.bear.upload.vo.UploadVO;
@Service
public
class
ChunkUploadService
{
private
static
Logger
LOG
=
LoggerFactory.getLogger(ChunkUploadService.class);
@Value("${file.upload.path}")
private
String
UPLOAD_PATH;
private
static
final
String
Delimiter
=
"-";
/**
*
上傳之前校驗(整個文件、分片)
*
*
@param
md5FileVO
*
@return
*/
public
Object
check(CheckMd5FileVO
md5FileVO)
{
Integer
type
=
md5FileVO.getType();
Long
chunk
=
md5FileVO.getChunk();
String
fileName
=
md5FileVO.getFileName();
Long
fileSize
=
md5FileVO.getFileSize();
if
(type
==
0)
{//
未分片校驗
String
destfilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destfilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("文件已存在，跳過",
1);
}
else
{
return
RETURN.success("文件不存在",
0);
}
}
else
{//
分片校驗
String
fileMd5
=
md5FileVO.getFileMd5();
String
destFileDir
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
String
destFileName
=
chunk
+
Delimiter
+
fileName;
String
destFilePath
=
destFileDir
+
File.separator
+
destFileName;
File
destFile
=
new
File(destFilePath);
if
(destFile.exists()
&&
destFile.length()
==
fileSize)
{
return
RETURN.success("分片已存在，跳過",
1);
}
else
{
return
RETURN.success("分片不存在",
0);
}
}
}
/**
*
文件上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
upload(MultipartFile
file,
UploadVO
uploadVO)
{
Long
chunk
=
uploadVO.getChunk();
if
(chunk
==
null)
{//
沒有分片
return
UnChunkUpload(file,
uploadVO);
}
else
{//
分片
return
ChunkUpload(file,
uploadVO);
}
}
/**
*
分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
ChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
String
fileMd5
=
uploadVO.getFileMd5();
Long
chunk
=
uploadVO.getChunk();//
當前片
Long
chunks
=
uploadVO.getChunks();//
總共多少片
//
分片目錄創建
String
chunkDirPath
=
UPLOAD_PATH
+
File.separator
+
fileMd5;
File
chunkDir
=
new
File(chunkDirPath);
if
(!chunkDir.exists())
{
chunkDir.mkdirs();
}
//
分片文件上傳
String
chunkFileName
=
chunk
+
Delimiter
+
fileName;
String
chunkFilePath
=
chunkDir
+
File.separator
+
chunkFileName;
File
chunkFile
=
new
File(chunkFilePath);
try
{
file.transferTo(chunkFile);
}
catch
(Exception
e)
{
LOG.error("分片上傳出錯",
e);
return
RETURN.fail("分片上傳出錯",
1);
}
//
合並分片
Long
chunkSize
=
uploadVO.getChunkSize();
long
seek
=
chunkSize
*
chunk;
String
destFilePath
=
UPLOAD_PATH
+
File.separator
+
fileName;
File
destFile
=
new
File(destFilePath);
if
(chunkFile.length()
>
0)
{
try
{
FileUtil.randomAccessFile(chunkFile,
destFile,
seek);
}
catch
(IOException
e)
{
LOG.error("分片{}合並失敗：{}",
chunkFile.getName(),
e.getMessage());
return
RETURN.fail("分片合並失敗",
1);
}
}
if
(chunk
==
chunks
-
1)
{
//
刪除分片文件夾
FileUtil.deleteDirectory(chunkDirPath);
return
RETURN.success("上傳成功",
1);
}
else
{
return
RETURN.fail("上傳中...",
1);
}
}
/**
*
未分片上傳
*
*
@param
file
*
@param
uploadVO
*
@param
appVersion
*
@return
*/
public
Object
UnChunkUpload(MultipartFile
file,
UploadVO
uploadVO)
{
String
fileName
=
uploadVO.getName();
//
String
fileMd5
=
uploadVO.getFileMd5();
//
文件上傳
File
destFile
=
new
File(UPLOAD_PATH
+
File.separator
+
fileName);
if
(file
!=
null
&&
!file.isEmpty())
{
//
上傳目錄
File
fileDir
=
new
File(UPLOAD_PATH);
if
(!fileDir.exists())
{
fileDir.mkdirs();
}
if
(destFile.exists())
{
destFile.delete();
}
try
{
file.transferTo(destFile);
return
RETURN.success("上傳成功",
0);
}
catch
(Exception
e)
{
LOG.error("文件上傳出錯",
e);
return
RETURN.fail("文件上傳出錯",
0);
}
}
return
RETURN.fail("上傳失敗",
0);
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:Vue2.0結合webuploader實現文件分片上傳功能使用WebUploader實現分片斷點上傳文件功能（二）webuploader在springMVC+jquery+Java開發環境下的大文件分片上傳的實例代碼jQuery
webuploader分片上傳大文件