移动端谷歌浏览器上传图片失败的问题

如题，图片上传功能。部署到服务器，PC端测试好好的，可是到了移动端测试图片上传就卡死了，看了日志报了这个错。

Could not parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. null

解释：没法分析多部分servlet请求；嵌套异常为java.io.io exception:org.apache.tomcat.util.http.fileupload.fileuploadbase$io fileupload exception:处理多部分/表单数据请求失败。无效的

由于同是谷歌浏览器PC版和移动版确定是不同的。

解决方法：

排除法

百度了不少：1是搜狗输入法的问题，2是上传文件过大的问题设置到100M，3是form表单设置enctype="multipart/form-data"

这些我都作好了，所以不是这些问题

又在另外一个ipad上测试下，居然成功。找到问题的根本仍是浏览器版本的问题，升级到最新版本就行了。

要升级谷歌浏览器，可是要先升级ios,仍是安卓适合我啊。

 

后续：没想到过了几天仍然出现相同的问题

此次排除法：文件大小和链接超时

我上传文件大小单个和总量设置的都是100M，11张现场拍摄图够了。在PC端测试size为20M总量的图片上传没有问题，可是移动端大于10M则失败。

服务器log并无上传相关的报错，只是有个websocket链接的超时错误。用了代理服务器

所以将问题锁定在移动端浏览器的设置和服务器链接超时的问题上。

最后认定为网络的问题，当网速不佳时，上传时间变长。由于网速状态好的状况下能够上传成功。

 

 

就这样使用确定是不行的，必需要作出优化。首先想到的就是对上传的图片进行压缩再上传。

百度一下，大体思路是：将图片用canvas绘制，再用canvas.toDataURL方法进行压缩，最后生成一个Blob对象。

下面有两篇博客是我以为有价值的：

1、使用第三方的jQuery插件，不缺人民币的能够去 http://www.jq22.com/jquery-info19864 下载那个demo,用的是LocalResizeIMG

　　在此不得不说，好多帖子介绍LocalResizeIMG的还要用npm打包的真是坑球，一个js直接拿出来分享就好了搞那么多事。

2、原生的js，只是不适用个人场景http://www.javashuo.com/article/p-zmsajsgv-bt.html

　　个人业务不是用户每选择一张就上传一张，而是用户选择完11张图片后再统一上传。期间有选择的不肯定性，中间有修改的操做，甚至是选择完了不上传。所以借助第二篇博客的思路，把image使用canvas绘制，再使用canvas.toDataURL()进行一个压缩，固然这时候生成的base64格式字符串后台和前端都是能够解析的。为何还要转成Blob，由于二进制的Blob比Base64更节省流量。（科普：普通上传比Base64节省流量，base64的原始是3字节转换成4字节，也就是把24bit转成4个6bit,而后6bit再本身补位，最后占据的是32bit,因此原来的体积是base64体积的3/4）。

　　后台在接收到Bolb对象后解析成图片再上传到图片服务器保存。

　　原本是要本身写js的可是卡在了FileReader.onLoad上，我要这个方法把file的src读取出来赋值给img再用canvas重绘。可是这个是多线程异步的与js的单线程冲突。想要把多张图片src同步读取出来成了难题。所以参考了上面的第一篇博客用了LocalResizeIMG插件，没有币下载的同窗能够看我下一篇博客 HTML多图片压缩上传，我将分享细节的文件。

这样十几张图片轻松压缩要10M之内，业务回到了正常