工作小记——H5端图片压缩与上传
帮开发组的同事解决了个图片上传的问题。顺便给自己补补知识。解决问题学习技术真是令人愉悦的过程~
事起于H5有图片压缩并上传的需求。经过调研，选择了如下图。而服务端接受之前上传图片的方式是：
MultipartFile file = (Multipartrequest)request.getFile(filename);
并报错
然后两边同事就关于谁的问题进行了没有结果和解决方案的讨论
两方讨论了半天是不是压缩造成的，是不是压缩不可行啊。
H5端还提出以前上传方式和现在上传方式不同，现在用的是Plupload，看网上说这个组件请求方式默认是Options。需要服务端增加doOptions方法。
我们先来看压缩图片和上传的代码：
将图片放置入之前设定好长、宽、大小等参数的canvas里。其实就完成了图片向目标尺寸的压缩。
canvas.toDataURL获取到包含压缩后图片的base64编码的一串字符串
split(',')[1]获取到图片真正的base64编码的数据，去掉头部的说明
window.atob解码base64编码的数据，变成未经编码的数据（包含各种不可见字符），因为传输Base64数据太大了，所以解码出来传输
var ia为数组，存放了未经编码的图片数据
new Blob（[ia],……）将数据放入Blob对象
FormData将blob包入一个FormData里
用XMLHttpRequest用post形式发送出去
然后经过研究他们网上抄来的代码，压根和图片压缩以及Plupload没半毛钱关系嘛……
报错信息为：ParameterRequestWrapper can't be convert to Multipartrequest
通过查看以前和现在的http请求报文
发现一个可疑的地方：
以前：content-type：multipart/form-data
现在：content-type：text/xml
所以，结论是，只要setContent-type为multipart/form-data并指定boundary就可以了你们俩在逗我吗……
你们俩在逗我吗……相关知识点：
Base64
1.将二进制数据（如果用某种编码读，可能会有大量不可见字符）编码为可见字符串。
2.Base64的字符全集共65个（A~Z、a~z、0~9、+、/、=）。
3.编码方法是将二进制数据每6位一截取，6位2进制数可代码64种状态，分别对应了字母数字符号（A~Z、a~z、0~9、+、/）。=比较特殊，为补位
4.原本三个字符的串（8*3），最后会变成4个字符的串（6*4），所以会比原数据大
window.btoa——用base64进行编码
window.atob——对base64进行解码
multipart/form-data——即是用表单的方式，上传附件。需要设置content-type为multipart/form-data并指定boundary。boundary为文件与文件间的边界
参考：
