移動端谷歌瀏覽器上傳圖片失敗的問題

如題，圖片上傳功能。部署到服務器，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之內，業務回到了正常