龙源期刊网 http://www.qikan.com.cn
一种基于Base64编码的多图片上传技术研究
作者：周岚
来源：《电脑知识与技术》2018年第31期
摘要：基于传统的HTML5多文件上传采用FormData方式，将文件数据编译成键值对，用异步请求方式上传文件，但是不同浏览器对FormData对象的支持情况并不容乐观，导致不支持FormData的浏览器文件上传失败。该文针对浏览器不支持FormData对象操作，提出在基于浏览器客户端对图片进行Base64编码，将图片转换为字符串提交，在服务器端再对其进行解码后再生成图片文件的通用图片上传方法。 关键词：HTML5;FormData;Base64;文件上传
中图分类号：TP393; ; 文献标识码：A; ; ; 文章编号：1009-3044（2018）31-0106-03 Research on Multi Image Uploading Technology Based on Base64 Encoding ZHOU Lan
（Department of information technology， Xuzhou Vocational College of Finance and economics， Jiangsu， Xuzhou 221008，China）
Abstract： Based on the traditional HTML5 multi-file uploading method， the file data is compiled into key-value pairs and uploaded asynchronously. However， the support of different browsers for FormData objects is not optimistic， which leads to the failure of file uploading in
browsers that do not support FormData. In view of the fact that browsers do not support the operation of FormData objects， this paper proposes a general image uploading method based on browser client to encode pictures by Base64， convert pictures to string submission， decode them on the server and regenerate them into picture files.
Key words： HTML5; FormData; Base64; file upload 1 背景
基于浏览器的图片上传是Web应用开发中的通用功能，传统的图片上传通过表单选择客户端图片，在提交表单时将图片转换为二进制方式上传到服务器。在HTML5标准中，增加了一个新的接口FormData，可以通过JavaScript采用键值对的方式来模拟表单控件，并可以通过异步方式提交，大大提高了用户体验。目前大部分浏览器都能支持FormData对象，但是有的浏览器只部分支持FormData对象，比如苹果系统的safari浏览器，在进行图片上传时就不能
龙源期刊网 http://www.qikan.com.cn
采用FormData对象。而目前尤其是基于手机端图片上传的广泛应用，为了设计通用图片上传功能，就不能采用FormData对象，针对这种情况该文提出一种跨浏览器的多图片上传方法，在客户端通过JavaScript对用户选择的图片进行Base64编码，通过Post方式将编码后的字符串发送到服务器端，然后在服务器端对字符串进行Base64解码，并生成图片文件[1]。这种图片上传方法一方面兼容了浏览器，同时方便了用户体验。 2 基于Base64编码的图片上传方法简介
基于Base64编码的图片上传方法，主要包括客户端对图片文件编码，服务器端解码并生成图片文件两个部分，如图1所示。
当用户选择要上传的图片后，先对图片进行压缩，利用HTML5的canvas对象，重新绘制图片，根据要求设置压缩比例，重新生成新的图片数据，并对其进行Base64编码，将图片文件的原始文件名和生成的Base64编码保存到Json数据格式的对象数组中，最后上传时只要将Json文件发送到服务器端即可。在服务器端，接收到客户端请求的Json数据后，先对其进行解析，分离出原文件名和图片对应的Base64编码，并图片数据进行Base64解码，重新生成新的图片文件，并将新的文件名返回到客户端。 3 基于Base64编码的图片上传方法实现
基于Base64编码的图片上传分为客户端压缩编码和服务器端解码生成新的图片文件并返回客户端新图片的文件名。 3.1 客户端图片压缩及编码
当用户选择完图片后，通过调用ImageCompressor组件，首先对图片进行压缩，图片压缩的质量和生成图片最大和最小尺寸自行设置，压缩完成后使用HTML5的FileReader对象将图片数据进行Base64编码，同时将图片的文件名和生成的编码保存到Json对象数组中[2]，具体代码如程序1所示。
function compress（files，num） {
var flen=files.length; if（num==files.length） {
return;//没有图片了需要压缩了
龙源期刊网 http://www.qikan.com.cn
}
new ImageCompressor（files[num]， {