南昌网站建设报价单,福州营销型网站建设公司,良品铺子vi设计手册,成都工装装修设计公司标题#xff1a;基于Plupload实现Base64分割的文件上传方案关键词#xff1a;文件上传、Base64、Plupload、Blob、分割上传领域#xff1a;Web前端作者#xff1a;孙振强日期#xff1a;2018-04-13目录背景存在问题2.1. 体积增加1/32.2. 大文件上传不稳定方案思路3.1. 将服…标题基于Plupload实现Base64分割的文件上传方案关键词文件上传、Base64、Plupload、Blob、分割上传领域Web前端作者孙振强日期2018-04-13目录背景存在问题2.1. 体积增加1/32.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/3Base64化图片后体积增加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 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, //触发文件选择对话框的按钮为那个元素idurl: 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 jQuery5.2. Plupload官方文档5.3. Plupload中文文档
