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

如题,图片上传功能。部署到服务器,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对象。

下面有两篇博客是我觉得有价值的:

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

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

二、原生的js,只是不适用我的场景https://www.cnblogs.com/shinefon-2-2/p/5901330.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以内,业务回到了正常

原文地址:https://www.cnblogs.com/zeussbook/p/10448680.html