前段時間開發端內h5項目，用到了h5上傳圖片，現記錄下遇到的坑。
端內h5上傳圖片問題歸納：
1、Webview中使用原生h5 input file上傳圖片時android只能單選、ios只能多選；android上還存在的一個問題為：點擊上傳按鈕進入圖片選擇頁後，如果取消選擇，返回項目，則無法再次上傳，會波及到整個webview，其他h5頁面也無法上傳，只有關閉此webview重新進入才可以上傳——此問題需端原生修改方法覆蓋；
2、Jsdk chooseImage方法選擇圖片，android選擇相冊和拍照時無返回數據；
3、Android部分機型（Galaxy S8 Android 7.0）上傳圖片數量過多時導致整個app奔潰、重啓——此問題是webview申請渲染內存失敗導致，端原生添加android:hardwareAccelerated=“false”配置，關閉硬件加速後解決；
上傳圖片建議：
1、交互優化：縮略圖與預覽圖分別展示，選擇後即上傳，上傳完成後顯示網絡圖片；本地縮略圖使用壓縮後base64，上傳完成後使用又拍雲配置url!percent20(需根據配置確定)
2、上傳File文件格式：建議使用File格式上傳，因為文件轉為base64後大小會變為原來的4/3倍
3、前端適當壓縮：壓縮會增加部分處理時間、減低清晰度，但可以減少上傳時間、回顯時間，提升用户體驗，具體可根據項目情況確定，以下為不同壓縮比例清晰度對比，可供參考(辦公wifi)：
| 壓縮比例 | 壓縮清晰度（canvas） | 圖片 | 尺寸 | 大小 | 上傳時間 | 上傳格式 | 縮略圖 | 尺寸 | 大小 |
|---|---|---|---|---|---|---|---|---|---|
| 100% | - | 圖片 | 3264*2448 | 2.75MB | 6.5s | File | 圖片 | 652*489 | 111.08KB |
| 91.6% | 0.8 | 圖片（原圖-同上） | 3264*2448 | 3.3MB | 上傳失敗，server對圖片大小限制緣故 | Base64 | - | - | - |
| 100% | 1 | 圖片 | 2000*1500 | 4.11MB | 上傳失敗，server對圖片大小限制緣故 | Base64 | - | - | - |
| 28.6% | 0.8 | 圖片 | 2000*1500 | 1.03M-754.93 KB | 2.2s | Base64 | 圖片 | 400*300 | 43.73KB |
| 13.1% | 0.5 | 圖片 | 2000*1500 | 515.04KB-369.38 KB | 1.4s | Base64 | 圖片 | 400*300 | 43.77 KB |
| 7.1% | 0.3 | 圖片 | 2000*1500 | 280.21 KB-202.35 KB | 979ms | Base64 | 圖片 | 400*300 | 44.31 KB |
| 4.9% | 0.1 | 圖片 | 2000*1500 | 190.39 KB-138.56 KB | 763ms | Base64 | 圖片 | 400*300 | 43.95 KB |
| 12.4% | 0.8 | 圖片 | 1500*1125 | 493.32 KB-351.12 KB | 1.3s | Base64 | 圖片 | 300*225 | 25.62 KB |
| 3.5% | 0.3 | 圖片 | 1500*1125 | 139.22 KB-100.92 KB | 589ms | Base64 | 圖片 | 300*225 | 25.80 KB |
| 8.97% | 0.8 | 圖片 | 1000*750 | 277.03KB-196.37 KB | 866ms | Base64 | 圖片 | 200*150 | 12.84KB |
| 30% | 1 | 圖片 | 1000*750 | 1.08MB-759.61 KB | 2.3s | Base64 | 圖片 | 200*150 | 12.92KB |
| 3.6% | 0.5 | 圖片 | 1000*750 | 135.75 KB-96.66 KB | 612ms | Base64 | 圖片 | 200*150 | 12.81 KB |
備註：圖片清晰度影響因素較多，表中數據僅供參考
建議：適當減小圖片尺寸可以大幅降低圖片大小，canvas清晰度配置0.5、0.3時性價比比較高，但最終還是需要根據場景和業務需要確定合適的壓縮參數
4、不同項目可以針對性配置又拍雲縮略圖，訪問方式參照url!percent20，端內目前還不支持webp格式，端外可配置webp好處
