h5上傳圖片並預覽

1. 技術干貨 | 「選圖預覽並上傳」的場景如何解全網最全方案匯總來了

針對「選圖預覽並上傳」的場景，以下是最全的優化方案匯總：

選圖預覽方案：

1. 使用Android原生WebView：

   • 通過前端<input type="file">標簽實現選擇文件上傳。
   • 自定義擴展WebChromeClient的openFileChooser或onShowFileChooser方法，以喚起系統文件選擇器。
   • 注意返回的URI格式多樣，需進行統一處理。

2. 利用mPaaS的H5容器：

   • 內置了喚起文件選擇器的操作，但存在系統選擇器不可控的風險。
   • 部分客戶可能對文件選擇界面不滿意。

3. 實現JSAPI喚起Native自定義選圖頁面：

   • 利用H5容器的自定義JSAPI功能，自定義選圖頁面。
   • 前端調用喚起Native界面，結果以Base64形式返回。
   • 解決了系統選擇文件的不可控問題，但需注意低端設備OOM問題和大量Base64轉JSON引發的ANR問題。

4. 選圖返回本地路徑，WebView攔截訪問本地資源：

   • 選圖後返回本地路徑，Native模塊攔截WebView訪問本地資源。
   • 實現本地圖片載入顯示，採用自定義域名進行資源攔截。
   • 解決了Base64傳遞數據過大導致的問題。

文件上傳方案：

1. 使用RPC介面上傳：

   • 通過mPaaS的RPC介面上傳文件。
   • 遇到文件過大導致服務端報錯的穩定性問題，且對大文件上傳存在風險。

2. 使用OSS方案上傳：

   • 推薦直接使用OSS方案上傳文件。
   • OSS專門解決文件上傳場景，用戶集成對應的SDK即可實現本地文件上傳。
   • 適合解決各種文件上傳需求，具有較高的穩定性和可靠性。

綜上所述，在選擇選圖預覽和文件上傳方案時，需根據具體需求和場景進行權衡，選擇最適合的方案進行實現。