標題：基于Plupload實現Base64分割的文件上傳方案

關鍵詞：文件上傳、Base64、Plupload、Blob、分割上傳

領域：Web前端

作者：孫振強

日期：2018-04-13

目錄

背景

存在問題

2.1. 體積增加1/3

2.2. 大文件上傳不穩定

方案思路

3.1. 將服務器端的上傳限制調整至足夠大。

3.2. 將Base64進行分段傳輸。

3.3. 將Base64轉換回file對象，調用plupload進行上傳。

具體實現

4.1. 將Base64文件轉化為Blob對象

4.3. 調用plupload將file對象上傳

參考資料

5.1. Base64轉化為Blob，轉化為File的參考文檔

5.2. Plupload官方文檔

5.3. Plupload中文文檔

1. 背景

前端在進行圖片上傳的時候，有時候會有裁剪的需求，對于裁剪功能現在采用HTML5的canvas實現，處理后的圖片為Base64格式，然后將將Base64內容直接提交給后端接口。

除此之外，普通上傳采用統一的文件微服務，前端使用plupload插件進行文件的分割、進度、回調等，后端分片接收文件、合并、用fastdfs存儲、返回相對路徑。

2. 存在問題

背景所述的實現方案在使用的過程存在一定問題：

2.1. 體積增加1/3

Base64化圖片后，體積增加1/3左右。

2.2. 大文件上傳不穩定

大圖片采用Base64單次傳輸會超過后端接口上傳容量設置，并且網絡的穩定性也會引起上傳的不穩定。

3. 方案思路

重要的問題在2.2.，解決方案可以有以下幾種：

3.1. 將服務器端的上傳限制調整至足夠大。

比如100M，但是這樣不夠規范和優秀。

3.2. 將Base64進行分段傳輸。

前端寫一個Base64分割傳輸處理的模塊，后端寫一個Base64分段接收上傳。比較科學，但工作量較大，前后端都需要修改，而且穩定性需要多次優化。

3.3. 將Base64轉換回file對象，調用plupload進行上傳。

這種方式最理想，因為將變化和工作量都限制在了一個小范圍內。

并且plupload是比較完善、成熟的插件，穩定性比較好，后端的實現代碼完全不需要修改。

4. 具體實現

本文將詳述3.3.方案的具體實現。

4.1. 將Base64文件轉化為Blob對象

/**

* Convert a base64 string in a Blob according to the data and contentType.

*

* @param b64Data {String} Pure base64 string without contentType

* @param contentType {String} the content type of the file i.e (image/jpeg - image/png - text/plain)

* @param sliceSize {Int} SliceSize to process the byteCharacters

* @see http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

* @return Blob

*/

function b64toBlob(b64Data, contentType, sliceSize) {

contentType = contentType || '';

sliceSize = sliceSize || 512;

var byteCharacters = atob(b64Data);

var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {

var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);

for (var i = 0; i < slice.length; i++) {

byteNumbers[i] = slice.charCodeAt(i);

}

var byteArray = new Uint8Array(byteNumbers);

byteArrays.push(byteArray);

}

var blob = new Blob(byteArrays, {type: contentType});

return blob;

}

具體轉化：

var ImageURL = "data:image/gif;base64,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";

// Split the base64 string in data and contentType

var block = ImageURL.split(";");

// Get the content type of the image

var contentType = block[0].split(":")[1];// In this case "image/gif"

// get the real base64 content of the file

var realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...."

// Convert it to a blob

var blob = b64toBlob(realData, contentType);

4.2. 將Blob對象轉化為File對象

// Convert it to a blob

var blob = b64toBlob(realData, contentType);

// 轉為File對象file

val file = new File([blob], "文件名.gif");

//對象信息如下：

//File

// lastModified: 1523531338900

// lastModifiedDate: Date 2018-04-12T11:08:58.900Z

// name: "文件名.gif"

// size: 1951

// type: "image/gif"

// webkitRelativePath: ""

4.3. 調用plupload將file對象上傳

下面代碼是實例化plupload，使用常規的方法即可，不清楚的同學請查閱5.中的plupload文檔。

var uploader = new plupload.Uploader({

runtimes: 'html5,flash,silverlight,html4',

browse_button: 'input_file', //觸發文件選擇對話框的按鈕，為那個元素id

url: upload_url, //服務器端的上傳頁面地址

chunk_size: '512kb', //割成的大小

max_file_size: '20mb', //最大只能上傳1gb的文件

},

init: {

FilesAdded: function (up, files) {

//此處可以做選擇文件后的處理

uploader.start();

},

UploadProgress: function () {

//上傳過程處理

},

Error: function (up, err) {

$('#input_file').removeAttr('disabled');

if (err.code == '-601') {

$('.error_message').text('請上傳圖片格式文件!');

} else if (err.code == '-602') {

$('.error_message').text('對不起，此文件剛才已選擇上傳了。');

} else {

$('.error_message').text('上傳文件錯誤：' + err.code);

}

},

FileUploaded: function (up, file, result) {

//result.response

//上傳完成后續處理

}

}

});

下面的代碼才是重點，通過plupload進行上傳：

//此處uploader為剛才定義的plupload實例，file為base64轉化后的對象

uploader.addFile(file);

uploader.start();

大功告成，具體你就來動手實現吧。

5. 參考資料

5.1. Base64轉化為Blob，轉化為File的參考文檔

How to convert a base64 image into a image file and upload it with an asynchronous form using jQuery

5.2. Plupload官方文檔

5.3. Plupload中文文檔

總結

以上是生活随笔為你收集整理的pupload 文件分块 php,基于Plupload实现Base64分割的文件上传方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。