标题：基于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官方文档
https://www.plupload.com/docs/v2/Uploader
网友评论