android利用h5上傳圖片遇到的問題
阿新 • • 發佈:2018-12-30
由於專案需求,需要在一個h5頁面上實現圖片上傳的功能。整個流程是當點選h5然後webview會監聽到這個事件接著在android原生這部分獲取選中圖片並將圖片路徑傳回給h5頁面處理並上傳。監聽這個選擇圖片的監聽是需要去繼承一個WebChromeClient並重寫它裡面的方法(webview初始化時需要webView.setWebChromeClient(new MyWebClient()) 這樣監聽才會發生),因為由於各個系統版本webview的差異是需要重寫多個方法才能適配不同的系統版本的手機,程式碼如下:
private class MyWebClient extends WebChromeClient { // For Android 5.0+ //接受一個uris[] @Override public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback , FileChooserParams fileChooserParams) { LuheLogUtils.LogI("LuheGoodsShowActivity", "openFileChooser--5.0+"); mValueCallback = valueCallback; goToPhotos(); return true; } // For Android 3.0+ //只能單獨傳一個uri public void openFileChooser(ValueCallback uploadMsg) { LuheLogUtils.LogI("LuheGoodsShowActivity", "openFileChooser--3.0+"); mValueCallbackSingle = uploadMsg; goToPhotos(); } //3.0--版本 public void openFileChooser(ValueCallback uploadMsg, String acceptType) { LuheLogUtils.LogI("LuheGoodsShowActivity", "openFileChooser--3.0"); openFileChooser(uploadMsg); } // For Android 4.1 public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) { LuheLogUtils.LogI("LuheGoodsShowActivity", "openFileChooser--4.1"); openFileChooser(uploadMsg); } @Override public void onProgressChanged(WebView view, int newProgress) { LuheLogUtils.LogI("LuheGoodsShowActivity", "newProgress--newProgress--"+newProgress); super.onProgressChanged(view, newProgress); } @Override public void onReceivedTitle(WebView view, String title) { LuheLogUtils.LogI("LuheGoodsShowActivity", "onReceivedTitle--title--" + title); super.onReceivedTitle(view, title); } }
從程式碼中開出每次監聽都會返回一個valueCallback物件,而這個物件是負責將我們獲取到的圖片路徑傳給h5頁面 mValueCallback.onReceiveValue(uris);
但是這裡有個問題需要注意的是如果打一次觸發了監聽返回mValueCallback沒有呼叫onReceiveValue方法,下一次點選時就不會再次觸發監聽了,所以會造成無論怎麼點都沒有反應這種情況,為了解決這個問題需要在沒有選中圖片路徑的情況下mValueCallback.onReceiveValue(null)傳一個空值,這樣就不會在出現沒有選中圖片後,下次點選沒有反應的情況了。
最後 webview的坑很多,開發的時候要多加註意。