IOS webview打开相机 相册 选择文件上传
IOS使用wkwebview
一、核心前提：配置 Info.plist 权限
iOS 调用相机 / 相册必须在 Info.plist 中添加权限描述，否则会直接崩溃或无响应：
右键 Info.plist → 选择「Open As」→「Source Code」，添加以下代码：
<!-- 相机权限 --><key>NSCameraUsageDescription</key><string>需要访问相机以拍摄照片</string><!-- 相册权限（读取） --><key>NSPhotoLibraryUsageDescription</key><string>需要访问相册以选择照片</string><!-- iOS 11+ 相册写入（如需上传后保存可加） --><key>NSPhotoLibraryAddUsageDescription</key><string>需要访问相册以保存照片</string>二、WKWebView 配置与权限处理
- 初始化 WKWebView 并设置代理
import WebKit import Photos class WebViewController: UIViewController, WKUIDelegate, WKNavigationDelegate { var webView: WKWebView! override func viewDidLoad(){super.viewDidLoad()// 1. 配置 WKWebView let webConfig =WKWebViewConfiguration()// 允许 JS 交互（前端触发选择图片必须开） webConfig.preferences.javaScriptEnabled = true webConfig.preferences.javaScriptCanOpenWindowsAutomatically = true // 2. 创建 WKWebView webView =WKWebView(frame: view.bounds, configuration: webConfig) webView.uiDelegate =self// 必须设置，处理权限请求 webView.navigationDelegate =self view.addSubview(webView)// 3. 加载本地/远程页面（示例加载本地 test.html）if let htmlPath = Bundle.main.path(forResource:"test", ofType:"html"){ let htmlURL =URL(fileURLWithPath: htmlPath) webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())}}}- 实现 WKUIDelegate 处理相机 / 相册权限请求
WKWebView 会通过 webView:permissionRequest: 回调请求媒体权限，需在这里处理：
`// MARK: - WKUIDelegate
extension WebViewController {
// 处理权限请求（相机/麦克风/相册等）
func webView(_ webView: WKWebView, permissionRequest: WKPermissionRequest) {
// 1. 相机权限
if permissionRequest.permissionType == .camera {
// 先检查系统相机权限
AVCaptureDevice.requestAccess(for: .video) { granted in
DispatchQueue.main.async {
granted ? permissionRequest.allow() : permissionRequest.deny()
}
}
}
// 2. 相册权限（WKPermissionType 无直接相册枚举，需配合前端 input 触发）
else if permissionRequest.permissionType == .photos {
PHPhotoLibrary.requestAuthorization { status in
DispatchQueue.main.async {
status == .authorized ? permissionRequest.allow() : permissionRequest.deny()
}
}
}
// 其他权限（如麦克风）可按需处理
else {
permissionRequest.allow()
}
}// iOS 14+ 新增：细化相册权限请求（只读/可写）
func webView(_ webView: WKWebView, requestMediaCapturePermissionFor origin: WKSecurityOrigin, initiatedByFrame frame: WKFrameInfo, type: WKMediaCaptureType, decisionHandler: @escaping (WKPermissionDecision) -> Void) {
if type == .camera {
AVCaptureDevice.requestAccess(for: .video) { granted in
decisionHandler(granted ? .grant : .deny)
}
} else if type == .microphone {
AVCaptureDevice.requestAccess(for: .audio) { granted in
decisionHandler(granted ? .grant : .deny)
}
}
}
}`
三、扩展：JS 与原生交互（可选）
如果需要将选择的图片传给原生处理（如上传、压缩），可添加 WKScriptMessageHandler：
// 初始化时添加消息处理器 webConfig.userContentController.add(self, name:"uploadImage")// 实现消息处理 extension WebViewController: WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage){if message.name =="uploadImage", let imageData = message.body as? String {// 处理前端传递的图片 Base64 数据print("收到图片数据：", imageData)}}}前端可将图片转为 Base64 后调用：
// 前端将图片转 Base64 并传给原生functionuploadImage(file){const reader =newFileReader(); reader.onload=function(e){ window.webkit.messageHandlers.uploadImage.postMessage(e.target.result);}; reader.readAsDataURL(file);}关键注意事项
ATS 限制：如果加载远程 HTTPS 页面，需确保服务器配置符合 iOS ATS 规则（iOS 9+ 默认禁用 HTTP，如需允许需在 Info.plist 加 NSAppTransportSecurity 例外）；
iOS 版本差异：
iOS 14+ 需用 requestMediaCapturePermissionFor 细化媒体权限；
iOS 15+ 对相册权限新增「部分访问」，需兼容 PHAuthorizationStatus.limited；
文件大小限制：前端选择图片后，如需传给原生，可通过 WKScriptMessageHandler 交互，避免大文件卡顿；
权限申请时机：不要提前申请权限，需等用户触发 input 后再由系统弹窗申请（符合 iOS 隐私规范）。
