標題：基于Plupload實現(xiàn)Base64分割的文件上傳方案
關(guān)鍵詞：文件上傳、Base64、Plupload、Blob、分割上傳
領(lǐng)域：Web前端
作者：孫振強
日期：2018-04-13
目錄
- 背景
- 存在問題
2.1. 體積增加1/3
2.2. 大文件上傳不穩(wěn)定 - 方案思路
3.1. 將服務(wù)器端的上傳限制調(diào)整至足夠大。
3.2. 將Base64進行分段傳輸。
3.3. 將Base64轉(zhuǎn)換回file對象，調(diào)用plupload進行上傳。 - 具體實現(xiàn)
4.1. 將Base64文件轉(zhuǎn)化為Blob對象
4.3. 調(diào)用plupload將file對象上傳 - 參考資料
5.1. Base64轉(zhuǎn)化為Blob，轉(zhuǎn)化為File的參考文檔
5.2. Plupload官方文檔
5.3. Plupload中文文檔
1. 背景
前端在進行圖片上傳的時候，有時候會有裁剪的需求，對于裁剪功能現(xiàn)在采用HTML5的canvas實現(xiàn)，處理后的圖片為Base64格式，然后將將Base64內(nèi)容直接提交給后端接口。
除此之外，普通上傳采用統(tǒng)一的文件微服務(wù)，前端使用plupload插件進行文件的分割、進度、回調(diào)等，后端分片接收文件、合并、用fastdfs存儲、返回相對路徑。
2. 存在問題
背景所述的實現(xiàn)方案在使用的過程存在一定問題：
2.1. 體積增加1/3
Base64化圖片后，體積增加1/3左右。
2.2. 大文件上傳不穩(wěn)定
大圖片采用Base64單次傳輸會超過后端接口上傳容量設(shè)置，并且網(wǎng)絡(luò)的穩(wěn)定性也會引起上傳的不穩(wěn)定。
3. 方案思路
重要的問題在2.2.，解決方案可以有以下幾種：
3.1. 將服務(wù)器端的上傳限制調(diào)整至足夠大。
比如100M，但是這樣不夠規(guī)范和優(yōu)秀。
3.2. 將Base64進行分段傳輸。
前端寫一個Base64分割傳輸處理的模塊，后端寫一個Base64分段接收上傳。比較科學(xué)，但工作量較大，前后端都需要修改，而且穩(wěn)定性需要多次優(yōu)化。
3.3. 將Base64轉(zhuǎn)換回file對象，調(diào)用plupload進行上傳。
這種方式最理想，因為將變化和工作量都限制在了一個小范圍內(nèi)。
并且plupload是比較完善、成熟的插件，穩(wěn)定性比較好，后端的實現(xiàn)代碼完全不需要修改。
4. 具體實現(xiàn)
本文將詳述3.3.方案的具體實現(xiàn)。
4.1. 將Base64文件轉(zhuǎn)化為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;
}
具體轉(zhuǎn)化：
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對象轉(zhuǎn)化為File對象
// Convert it to a blob
var blob = b64toBlob(realData, contentType);
// 轉(zhuǎn)為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. 調(diào)用plupload將file對象上傳
下面代碼是實例化plupload，使用常規(guī)的方法即可，不清楚的同學(xué)請查閱5.中的plupload文檔。
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'input_file', //觸發(fā)文件選擇對話框的按鈕，為那個元素id
url: upload_url, //服務(wù)器端的上傳頁面地址
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
//上傳完成后續(xù)處理
}
}
});
下面的代碼才是重點，通過plupload進行上傳：
//此處uploader為剛才定義的plupload實例，file為base64轉(zhuǎn)化后的對象
uploader.addFile(file);
uploader.start();
大功告成，具體你就來動手實現(xiàn)吧。
5. 參考資料
5.1. Base64轉(zhuǎn)化為Blob，轉(zhuǎn)化為File的參考文檔
How to convert a base64 image into a image file and upload it with an asynchronous form using jQuery
5.2. Plupload官方文檔
https://www.plupload.com/docs/v2/Uploader
