H5调用本地相册/相机上传图片

最新推荐文章于 2025-06-06 11:13:40 发布

Android架构师丨小熊

最新推荐文章于 2025-06-06 11:13:40 发布

阅读量6.5k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：移动互联网 Android学习 Android Android程序员 Android开发文章标签： Android

本文链接：https://blog.youkuaiyun.com/weixin_45365889/article/details/96872527

本文详细记录了H5如何调用Android的本地相册和相机功能进行图片上传的过程，包括H5中使用标签、Android端WebView的配置与监听，以及在Android 7.0以上版本的适配和文件选择后的处理。同时提到了选择图片后可能出现的只调用一次的问题，以及使用Luban库进行图片压缩的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中有时候会用到H5调用本地图片或者相机，像第三方的实名认证，在线客服等等都需要上传图片。H5中只需要通过<input>调用即可，ios是可以的实现的，不需要自己处理，除非客户端压缩图片，但是Android中需要自己处理，比较坑，本文记录H5调用本地图片或者相机的实现过程以及遇到的问题。

先看效果图

H5

H5主要是通过input标签来获取图片

 <input class="upload-input"  accept="image/*" multiple required type="file" @change="chooseImg">

Android

通过WebView加载h5页面，监听WebView对应的方法，实现自己的逻辑。

WebView初始化，放开对应的权限

private fun initWebView() {
        val settings = mWebView.settings
        settings.javaScriptEnabled = true
        settings.javaScriptCanOpenWindowsAutomatically = true
        //自适应屏幕
        settings.layoutAlgorithm = SINGLE_COLUMN
        settings.loadWithOverviewMode = true
        settings.domStorageEnabled = true
        settings.databaseEnabled = true
        settings.setSupportZoom(false)
        mWebView.isHorizontalScrollBarEnabled = false
        mWebView.isVerticalScrollBarEnabled = false
        mWebView.webViewClient = webViewClient
        mWebView.webChromeClient = webViewChromeClient
}

设置WebChromeClient

当点击input标签的时候会调用WebChromeClient的onShowFileChooser()方法（5.0+）或者openFileChooser()方