這幾天在客戶端接入一個Web頁的客服系統(tǒng)，用來接受用戶的反饋和建議。Android客戶端集成這個客服H5之后，圖片死活傳遞不上去。看了一下iOS同事的集成效果，可以自由上傳圖片，再把H5的地址用Android原生瀏覽器打開，也可以正常打開相冊上傳圖片。

What??? 見鬼了， 氣抖冷！！！

看了一些博客，使用Android的WebView在默認(rèn)情況下是不能夠支持上傳文件的(需要重寫 onShowFileChooser方法)。那就只能擼起袖子自己干了。

項目中使用的瀏覽器內(nèi)核是騰訊X5瀏覽器，那就去騰訊X5的技術(shù)文檔看看有沒有實現(xiàn)方式：TBS開發(fā)指引， 找了一下發(fā)現(xiàn)還真有

方法一： 文件單選：設(shè)置client回調(diào)

mWebView.setWebChromeClient(new WebChromeClient() { @Override public void openFileChooser( ValueCallback<Uri> uploadFile, String acceptType, String captureType) { //保存對應(yīng)的valuecallback供選擇后使用 //通過startActivityForResult啟動文件選擇窗口或自定義文件選擇 } });

文件多選：設(shè)置client回調(diào)

mWebView.setWebChromeClientExtension(new ProxyWebChromeClientExtension() { @Override public void openFileChooser( android.webkit.ValueCallback<Uri[]> uploadFile, String acceptType, String captureType) { //保存對應(yīng)的valuecallback供選擇后使用 //通過startActivityForResult啟動文件選擇窗口或自定義文件選擇 }});

方法二： 設(shè)置client回調(diào)（單選多選均會回調(diào)該接口）

mWebView.setWebChromeClient(new WebChromeClient() { @Override public boolean onShowFileChooser( IX5WebViewBase webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { //保存對應(yīng)的valuecallback供選擇后使用 //通過startActivityForResult啟動文件選擇窗口或自定義文件選擇 } });

然后在activity返回時將用戶的選擇設(shè)置給對應(yīng)的ValueCallback

protected void onActivityResult(int requestCode, int resultCode, Intent data) { //如果是文件選擇 if (resultCode == RESULT_OK) { //給文件選擇的ValueCallback設(shè)置onReceiveValue值 } else if (resultCode == RESULT_CANCELED) { //給文件選擇的ValueCallback設(shè)置null值 }}2、實現(xiàn)文件單選

在項目自定義的WebChromeClient 中，重寫openFileChooser方法， 調(diào)用項目中圖片選擇組件，圖片選擇成功后將生成的uri使用valueCallback回調(diào)，即可上傳成功

// 圖片單選上傳 @Override public void openFileChooser(ValueCallback<Uri> valueCallback, String s, String s1) { Log.i(TAG, 'openFileChooser: acceptType: ' + s + ' captureType: ' + s1);// 調(diào)用項目中圖片選擇組件 // 圖片選擇成功后將生成的uri使用valueCallback回調(diào) // 即可上傳成功 } // 很多博客介紹了， 要寫很多Android各個API的兼容代碼， 其實不用。 X5在這個方法底層其實實現(xiàn)了兼容各系統(tǒng)的能力，不需要上層開發(fā)者來實現(xiàn)。 只需實現(xiàn)這一個方法即可

實現(xiàn)效果：

為簡單起見， 集成一個第三方的圖片選擇控件

github.com/thewyp/Avat…

集成方式：

dependencies {...compile ’me.thewyp:avatar:1.0.4’ }

使用方式：

new AvatarStudio.Builder(activityContext) .needCrop(true)//是否裁剪，默認(rèn)裁剪 .setTextColor(Color.BLUE) .dimEnabled(true)//背景是否dim 默認(rèn)true .setAspect(1, 1)//裁剪比例 默認(rèn)1：1 .setOutput(200, 200)//裁剪大小 默認(rèn)200*200 .setText('打開相機', '從相冊中選取', '取消') .show(new AvatarStudio.CallBack() {@Overridepublic void callback(String uri) { //uri為圖片路徑 Picasso.with(activityContext).load(new File(uri)).into(mImageView);} });

實現(xiàn)Web上傳圖片

public class WebChromeClientImpl extends WebChromeClient { ...... // 圖片單選上傳 @Override public void openFileChooser(ValueCallback<Uri> valueCallback, String s, String s1) { Log.i(TAG, 'openFileChooser: acceptType: ' + s + ' captureType: ' + s1);new AvatarStudio.Builder(context) .needCrop(true)//是否裁剪，默認(rèn)裁剪 .setTextColor(Color.BLUE) .dimEnabled(true)//背景是否dim 默認(rèn)true .setAspect(1, 1)//裁剪比例 默認(rèn)1：1 .setOutput(200, 200)//裁剪大小 默認(rèn)200*200 .setText('打開相機', '從相冊中選取', '取消') .show(new AvatarStudio.CallBack() {@Overridepublic void callback(String uri) { //uri為圖片路徑 valueCallback.onReceiveValue(Uri.parse(uri)); // 將生成的Uri使用valueCallback 回調(diào)給X5底層，實現(xiàn)圖片上傳} }); } ......}

至此，圖片的上傳就實現(xiàn)了。文件的實現(xiàn)也是同理， 大家感興趣的可以試試

以上就是Android 使用騰訊X5瀏覽器上傳圖片的示例的詳細(xì)內(nèi)容，更多關(guān)于Android 上傳圖片的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！