快捷導(dǎo)航

Android 使用騰訊X5瀏覽器上傳圖片的示例

更新時(shí)間：2021年04月02日 08:50:09 作者：沉默王貳

這篇文章主要介紹了Android 使用騰訊X5瀏覽器上傳圖片的示例，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下

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

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

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

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

1、文件選擇

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

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

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

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

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

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

然后在activity返回時(shí)將用戶的選擇設(shè)置給對(duì)應(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、實(shí)現(xiàn)文件單選

在項(xiàng)目自定義的WebChromeClient 中，重寫openFileChooser方法，調(diào)用項(xiàng)目中圖片選擇組件，圖片選擇成功后將生成的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)用項(xiàng)目中圖片選擇組件
    // 圖片選擇成功后將生成的uri使用valueCallback回調(diào) 
    // 即可上傳成功
    
  }
  // 很多博客介紹了， 要寫很多Android各個(gè)API的兼容代碼， 其實(shí)不用。 X5在這個(gè)方法底層其實(shí)實(shí)現(xiàn)了兼容各系統(tǒng)的能力，不需要上層開發(fā)者來實(shí)現(xiàn)。 只需實(shí)現(xiàn)這一個(gè)方法即可

實(shí)現(xiàn)效果：

3、舉個(gè)例子

為簡(jiǎn)單起見，集成一個(gè)第三方的圖片選擇控件

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("打開相機(jī)", "從相冊(cè)中選取", "取消")
              .show(new AvatarStudio.CallBack() {
                @Override
                public void callback(String uri) {
                   //uri為圖片路徑
                   Picasso.with(activityContext).load(new File(uri)).into(mImageView);
                }
              });

實(shí)現(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("打開相機(jī)", "從相冊(cè)中選取", "取消")
      .show(new AvatarStudio.CallBack() {
        @Override
        public void callback(String uri) {
          //uri為圖片路徑
          valueCallback.onReceiveValue(Uri.parse(uri)); // 將生成的Uri使用valueCallback 回調(diào)給X5底層，實(shí)現(xiàn)圖片上傳
        }
      });
  }
  ......
}

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

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

您可能感興趣的文章: