使用WebUploader解決安卓微信瀏覽器上傳圖片中遇到的bug

ybak 發(fā)布于2019-08-19 18:03 / 3507人閱讀

摘要：具體的環(huán)境我也不太了解，但是經(jīng)過(guò)實(shí)際多臺(tái)安卓機(jī)型的測(cè)試，我采取的方案可以基本確保在安卓機(jī)中微信瀏覽器的成功上傳。

摘自個(gè)人博客：走啊走的記錄，歡迎點(diǎn)擊查看，效果更佳！

微信瀏覽器上傳圖片bug的原因

微信在新版本中采用的是自己的X5內(nèi)核瀏覽器，而在較老的版本中還有可能是安卓的原生瀏覽器。具體的環(huán)境我也不太了解，但是經(jīng)過(guò)實(shí)際多臺(tái)安卓機(jī)型的測(cè)試，我采取的方案可以基本確保在安卓機(jī)中微信瀏覽器的成功上傳。蘋(píng)果機(jī)型沒(méi)問(wèn)題，因?yàn)槲⑿诺膇os客戶(hù)端使用的是Safari的內(nèi)核，沒(méi)有各種坑，且效果最好。

這里給出一個(gè) WebUploader 官方關(guān)于移動(dòng)端適配的 issues 鏈接。里面提供的方法確實(shí)有效，但就是解決的方案并沒(méi)有很清楚的展示出來(lái)，從該issues中有好幾個(gè)人用戶(hù)提出如何修改就能知道了。

開(kāi)始時(shí)遇到的問(wèn)題 環(huán)境

后臺(tái)使用 Spring MVC [V 4.08]，前端使用一個(gè)開(kāi)源的 HTML5 框架

問(wèn)題

ios可完美上傳，安卓手機(jī)一半以上不太支持，出現(xiàn)進(jìn)度條卡死，圖片無(wú)法上傳成功而且只能上傳png格式圖片的問(wèn)題（后來(lái)證明是由于壓縮失敗引起的，在解決中詳細(xì)指出）。發(fā)布到服務(wù)器上正式運(yùn)營(yíng)以后，發(fā)現(xiàn)部分用戶(hù)只填寫(xiě)了文字信息，無(wú)法上傳圖片，不好統(tǒng)計(jì)數(shù)據(jù)，但是這樣的 BUG 率顯然是不行的，接下來(lái)就給出我的解決方案吧，經(jīng)過(guò)實(shí)際測(cè)試應(yīng)該是沒(méi)問(wèn)題的，不保證完全有效，因?yàn)樵聿皇翘宄?，僅供參考。

后來(lái)的解決方案 第一步，sendAsBinary: true

我先是按照 issues 中給出的第一個(gè)解決方法，設(shè)置 sendAsBinary: true，后臺(tái)不做任何修改的情況下會(huì)產(chǎn)生 500 的錯(cuò)誤，但是此時(shí)解決了進(jìn)度條卡死的問(wèn)題（當(dāng)然啊！圖片直接就上傳失敗了?。鶕?jù)issues中 2betop 的回答，此時(shí)獲取文件應(yīng)該是直接獲取文件的二進(jìn)制流。

之前獲取圖片的方式是使用 Spring 自帶的 MultipartHttpServletRequest 將 HttpServletRequest 的實(shí)例 request 轉(zhuǎn)換，然后獲取多個(gè)文件的信息。下方代碼根據(jù)實(shí)際代碼刪減不必要的細(xì)枝末節(jié)得出。

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        // 獲取上傳文件的列表
        Map fileMap = multipartRequest.getFileMap();

        // 圖片上傳前的原始名
        String originalName;

        // 循環(huán)獲取多文件上傳時(shí)文件列表中的每個(gè)文件對(duì)象
        for (Map.Entry entity : fileMap.entrySet()) {

            // 上傳文件
            MultipartFile mf = entity.getValue();

            // 文件上傳前的原始名
            originalName = mf.getOriginalFilename();

            // 文件擴(kuò)展名
            String fileExt = originalName.substring(originalName.lastIndexOf(".") + 1).toLowerCase();

            // 文件的絕對(duì)路徑File
            File uploadFile = new File(uploadAbsolutePath + "/" + newName);

            try {
                FileCopyUtils.copy(mf.getBytes(), uploadFile);
            } catch (IOException ioException) {
                logger.error("圖片保存到文件夾中出錯(cuò)！", ioException);
            } catch (Exception e) {
                logger.error("文件沒(méi)有復(fù)制到指定的目錄下", e);
            }

        }

這是原本的獲取方式，500 報(bào)錯(cuò)時(shí)指示是第一行代碼出錯(cuò)，無(wú)法轉(zhuǎn)換，因?yàn)榇藭r(shí) WebUploader 在設(shè)置了 sendAsBinary: true后并沒(méi)有使用 content-type: multipart/form-data 上傳文件，而是 content-type: application/ocet-stream,源碼中也是這么寫(xiě)的，但是實(shí)際獲取的請(qǐng)求頭中并沒(méi)有看到這個(gè)字段，而只是圖片的類(lèi)型.下列給出我使用 Chrome 的 devTools 保存下來(lái)的請(qǐng)求信息,只貼出 headers 中的字段值（針對(duì)同一個(gè)上傳 API 提出請(qǐng)求）：

500 錯(cuò)誤時(shí)的請(qǐng)求頭

          "url": "http://localhost:8787/lostFound/front/release/upload?releaseType=0&orderId=330&id=WU_FILE_1&name=20140120_035024000_iOS.jpg&type=image%2Fjpeg&lastModifiedDate=Sat+Jan+31+2015+01%3A32%3A34+GMT%2B0800+(%C3%A4%C2%B8%C2%AD%C3%A5%C2%9B%C2%BD%C3%A6%C2%A0%C2%87%C3%A5%C2%87%C2%86%C3%A6%C2%97%C2%B6%C3%A9%C2%97%C2%B4)&size=81666",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Origin",
              "value": "http://localhost:8787"
            },
            {
              "name": "Accept-Encoding",
              "value": "gzip, deflate"
            },
            {
              "name": "Host",
              "value": "localhost:8787"
            },
            {
              "name": "Accept-Language",
              "value": "zh-CN,zh;q=0.8"
            },
            {
              "name": "User-Agent",
              "value": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
            },
            {
              "name": "Content-Type",
              "value": "image/jpeg"
            },
            {
              "name": "Accept",
              "value": "*/*"
            },
            {
              "name": "Referer",
              "value": "http://localhost:8787/lostFound/"
            },
            {
              "name": "Cookie",
              "value": "JSESSIONID=2839511C91E9ECE62D155C6EE18F3259; JSESSIONID=64B53863E1C7D82B96927F298A864E18"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            },
            {
              "name": "Content-Length",
              "value": "81666"
            }
          ],
          "queryString": [
            {
              "name": "releaseType",
              "value": "0"
            },
            {
              "name": "orderId",
              "value": "330"
            },
            {
              "name": "id",
              "value": "WU_FILE_1"
            },
            {
              "name": "name",
              "value": "20140120_035024000_iOS.jpg"
            },
            {
              "name": "type",
              "value": "image%2Fjpeg"
            },
            {
              "name": "lastModifiedDate",
              "value": "Sat+Jan+31+2015+01%3A32%3A34+GMT%2B0800+(%C3%A4%C2%B8%C2%AD%C3%A5%C2%9B%C2%BD%C3%A6%C2%A0%C2%87%C3%A5%C2%87%C2%86%C3%A6%C2%97%C2%B6%C3%A9%C2%97%C2%B4)"
            },
            {
              "name": "size",
              "value": "81666"
            }
          ]，
          "bodySize": 0

在不修改 sendAsBinary: true 之前成功上傳的請(qǐng)求頭

          "url": "http://localhost:8787/lostFound/front/release/upload",
          "httpVersion": "HTTP/1.1",
          "headers": [
            {
              "name": "Origin",
              "value": "http://localhost:8787"
            },
            {
              "name": "Accept-Encoding",
              "value": "gzip, deflate"
            },
            {
              "name": "Host",
              "value": "localhost:8787"
            },
            {
              "name": "Accept-Language",
              "value": "zh-CN,zh;q=0.8"
            },
            {
              "name": "User-Agent",
              "value": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
            },
            {
              "name": "Content-Type",
              "value": "multipart/form-data; boundary=----WebKitFormBoundaryLeVpfViKLf1xLdIr"
            },
            {
              "name": "Accept",
              "value": "*/*"
            },
            {
              "name": "Referer",
              "value": "http://localhost:8787/lostFound/"
            },
            {
              "name": "Cookie",
              "value": "JSESSIONID=A76C40D04276501F54675AA02AE61467; JSESSIONID=64B53863E1C7D82B96927F298A864E18"
            },
            {
              "name": "Connection",
              "value": "keep-alive"
            },
            {
              "name": "Content-Length",
              "value": "44210"
            }
          ],
          "queryString": [],
          "bodySize": 929,

比較兩者的區(qū)別，發(fā)現(xiàn)區(qū)別：

content-type：修改為 sendAsBinary: true 以后，這個(gè)值變?yōu)?image/jpeg，而之前是 multipart/form-data，所以不能再使用 MultipartHttpServletRequest，后端獲取改為獲取文件流。

queryString：?jiǎn)⒂枚M(jìn)制上傳以后，參數(shù)直接添加到 Url 中。

bodySize：?jiǎn)⒂弥笞優(yōu)?0，啟用之前不為 0

先修改后端獲取方式，代碼更改如下：

        File file = new File(uploadAbsolutePath);

        if (!file.exists() && !file.mkdirs()) {
            // 如果file對(duì)象不存在，那么就將該對(duì)象的路徑名中不存在的文件夾目錄建立出來(lái)
        }

        // 文件擴(kuò)展名
        String fileExt = name.substring(name.lastIndexOf(".") + 1).toLowerCase();

        // 文件的絕對(duì)路徑File
        File uploadFile = new File(uploadAbsolutePath + "/" + newName);

        try {
            // 將上傳的圖片二進(jìn)制流保存為文件
            FileCopyUtils.copy(request.getInputStream(), new FileOutputStream(uploadFile));
        } catch (IOException ioException) {
            logger.error("圖片保存到文件夾中出錯(cuò)！", ioException);
        } catch (Exception e) {
            logger.error("文件沒(méi)有復(fù)制到指定的目錄下" ,e);
        }

此時(shí)后端就能夠獲取前端上傳的圖片了，ios 機(jī)型（iPhone 6s）依然沒(méi)問(wèn)題，安卓上傳png格式的圖片沒(méi)有任何問(wèn)題，但是jpg依然無(wú)法上傳。在后端的時(shí)候，打印 request 的 headers，發(fā)現(xiàn)安卓機(jī)型上傳jpg圖片是會(huì)丟失 content-type，值為空。結(jié)合 issues 中的判斷，也許是安卓機(jī)型在壓縮 jpg 格式圖片時(shí)出了問(wèn)題，先解決再試試看！

第二步：加上androidpatch

根據(jù)官方說(shuō)明，使用 webuploader.custom.js，其中將 runtime/html5/androidpatch.js 打包了進(jìn)來(lái)。

然后在沒(méi)有修改任何代碼的情況下，經(jīng)過(guò)五個(gè)手機(jī)的測(cè)試，新老機(jī)型：華為榮耀、魅藍(lán)、聯(lián)想等等的測(cè)試，安卓機(jī)可以在微信中隨意上傳圖片了。這是個(gè)大坑?。≌f(shuō)明無(wú)法上傳 jpg 格式圖片的原因竟是壓縮 jpg 格式圖片的時(shí)候出錯(cuò)，導(dǎo)致進(jìn)度條卡死，上傳失敗。

總結(jié)使用心得

按照以上的總結(jié)，我想下一次我應(yīng)該能再一次利用這一次的經(jīng)驗(yàn)解決微信上傳圖片的坑了~也懂得從request 的 headers 中尋找 bug 發(fā)生的原因，WebUploader 是個(gè)很優(yōu)秀的開(kāi)源插件，源碼也寫(xiě)的很有條理，清晰易讀，雖然我并沒(méi)有讀完?，F(xiàn)在閱讀框架源碼是越來(lái)越輕松了，加油，下個(gè)目標(biāo)是正在學(xué)習(xí)的 React.js。

云服務(wù)器 GPU云服務(wù)器在工作遇到 ddos 攻擊你是如何解決的安卓端上傳圖片 webuploader文件上傳微信圖片上傳

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79143.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ybak

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

伏羲云：中秋鉅惠，全場(chǎng)75折，美國(guó)cn2gia月付18起

閱讀 2015·2021-09-13 10:23
Microsoft Exchange ProxyToken漏洞可以讓黑客竊取用戶(hù)的電子郵件

閱讀 2345·2021-09-02 09:47
華為云828企業(yè)上云節(jié)：1核2G內(nèi)存HECS云服務(wù)器￥69.15/年，2核4G ￥264.99/年，

閱讀 3805·2021-08-16 11:01
輕云互聯(lián)-618鉅惠秒殺，香港CN2大寬帶KVM架構(gòu)云服務(wù)器月付22元，美國(guó)圣何塞精品云月付19元爆

閱讀 1227·2021-07-25 21:37
vertical-align 和 line-height | 垂直居中

閱讀 1608·2019-08-30 15:56
CSS基礎(chǔ)篇--使用position:sticky 實(shí)現(xiàn)粘性布局

閱讀 542·2019-08-30 13:52
標(biāo)準(zhǔn)庫(kù)（四）包裝對(duì)象二number

閱讀 3136·2019-08-26 10:17
支持單圖片和多圖片上傳

閱讀 2453·2019-08-23 18:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用WebUploader解決安卓微信瀏覽器上傳圖片中遇到的bug

相關(guān)文章

**移動(dòng)端開(kāi)發(fā)（使用webuploader上傳圖片,客戶(hù)端交互,修改alert彈窗等）**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

**在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳**

發(fā)表評(píng)論

0條評(píng)論

ybak

男|高級(jí)講師

TA的文章

伏羲云：中秋鉅惠，全場(chǎng)75折，美國(guó)cn2gia月付18起

Microsoft Exchange ProxyToken漏洞可以讓黑客竊取用戶(hù)的電子郵件

華為云828企業(yè)上云節(jié)：1核2G內(nèi)存HECS云服務(wù)器￥69.15/年，2核4G ￥264.99/年，

輕云互聯(lián)-618鉅惠秒殺，香港CN2大寬帶KVM架構(gòu)云服務(wù)器月付22元，美國(guó)圣何塞精品云月付19元爆

vertical-align 和 line-height | 垂直居中

CSS基礎(chǔ)篇--使用position:sticky 實(shí)現(xiàn)粘性布局

標(biāo)準(zhǔn)庫(kù)（四）包裝對(duì)象二number

支持單圖片和多圖片上傳

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用WebUploader解決安卓微信瀏覽器上傳圖片中遇到的bug

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！