基于Plupload实现Base64分割的文件上传方案

标题：基于Plupload实现Base64分割的文件上传方案
关键词：文件上传、Base64、Plupload、Blob、分割上传
领域：Web前台
作者：孙振强
日期：2018-04-13

目录

1. 背景
2. 存在问题
   2.1. 体积添加1/3
   2.2. 大文件上传不稳固
3. 方案思路
   3.1. 将服务器端的上传限制调整至足够大。
   3.2. 将Base64进行分段传输。
   3.3. 将Base64转换回file对象，调用plupload进行上传。
4. 具体实现
   4.1. 将Base64文件转化为Blob对象
   4.3. 调用plupload将file对象上传
5. 参考资料
   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,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==";// Split the base64 string in data and contentTypevar block = ImageURL.split(";");// Get the content type of the imagevar contentType = block[0].split(":")[1];// In this case "image/gif"// get the real base64 content of the filevar realData = block[1].split(",")[1];// In this case "R0lGODlhPQBEAPeoAJosM...." // Convert it to a blobvar blob = b64toBlob(realData, contentType);

4.2. 将Blob对象转化为File对象

// Convert it to a blobvar blob = b64toBlob(realData, contentType);  //  转为File对象fileval 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

https://ourcodeworld.com/articles/read/322/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

5.3. Plupload中文文档

http://www.phpin.net/tools/plupload/