pupload 文件分块 php,基于Plupload实现Base64分割的文件上传方案

标题：基于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中文文档