❶ 技術干貨 | 「選圖預覽並上傳」的場景如何解全網最全方案匯總來了
針對「選圖預覽並上傳」的場景，以下是最全的優化方案匯總：
選圖預覽方案：
使用Android原生WebView：
- 通過前端<input type="file">標簽實現選擇文件上傳。
- 自定義擴展WebChromeClient的openFileChooser或onShowFileChooser方法，以喚起系統文件選擇器。
- 注意返回的URI格式多樣，需進行統一處理。
利用mPaaS的H5容器：
- 內置了喚起文件選擇器的操作，但存在系統選擇器不可控的風險。
- 部分客戶可能對文件選擇界面不滿意。
實現JSAPI喚起Native自定義選圖頁面：
- 利用H5容器的自定義JSAPI功能，自定義選圖頁面。
- 前端調用喚起Native界面，結果以Base64形式返回。
- 解決了系統選擇文件的不可控問題，但需注意低端設備OOM問題和大量Base64轉JSON引發的ANR問題。
選圖返回本地路徑，WebView攔截訪問本地資源：
- 選圖後返回本地路徑，Native模塊攔截WebView訪問本地資源。
- 實現本地圖片載入顯示，採用自定義域名進行資源攔截。
- 解決了Base64傳遞數據過大導致的問題。
文件上傳方案：
使用RPC介面上傳：
- 通過mPaaS的RPC介面上傳文件。
- 遇到文件過大導致服務端報錯的穩定性問題，且對大文件上傳存在風險。
使用OSS方案上傳：
- 推薦直接使用OSS方案上傳文件。
- OSS專門解決文件上傳場景，用戶集成對應的SDK即可實現本地文件上傳。
- 適合解決各種文件上傳需求，具有較高的穩定性和可靠性。
綜上所述，在選擇選圖預覽和文件上傳方案時，需根據具體需求和場景進行權衡，選擇最適合的方案進行實現。
❷ web前端上傳圖片的幾種方法
下面給你介紹3種web前端上傳圖片的方法：
1.表單上傳
最傳統的圖片上傳方式是form表單上傳，使用form表單的input[type=」file」]控制項，打開系統的文件選擇對話框，從而達到選擇文件並上傳的目的。
ajax無刷新上傳
Ajax無刷新上傳的方式，本質上與表單上傳無異，只是把表單里的內容提出來採用ajax提交，並且由前端決定請求結果回傳後的展示結果。
3.各類插件上傳
當上傳的需求要求可預覽、顯示上傳進度、中斷上傳過程、大文件分片上傳等等，這時傳統的表單上傳很難實現這些功能，我們可以藉助現有插件完成。
如網路上傳插件Web Uploader、jQuery圖片預覽插件imgPreview 、拖拽上傳與圖像預覽插件Dropzone.js等等，大家可根據項目實際需求選擇適合的插件。