如何让macOS SwiftUI WKWebView中的文件打开对话框正常工作

嘿，这个问题我之前也踩过坑！核心原因是WKWebView在macOS上不会自动处理文件上传请求，得咱们手动实现WKUIDelegate的对应方法，再配合正确的沙箱权限配置才行。咱们一步步来搞定：

第一步：完善WKUIDelegate的文件上传处理逻辑 #

你的Coordinator类已经实现了WKUIDelegate，但缺少处理文件选择弹窗的关键方法。在Coordinator里添加下面这个方法，它会在WebView触发文件上传请求时弹出Finder窗口：

public func webView(_ webView: WKWebView, runOpenPanelWith parameters: WKOpenPanelParameters, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping ([URL]?) -> Void) {
    // 创建macOS的文件选择面板
    let openPanel = NSOpenPanel()
    // 匹配WebView请求的参数（是否允许多选、是否允许文件夹等）
    openPanel.allowsMultipleSelection = parameters.allowsMultipleSelection
    openPanel.canChooseDirectories = parameters.allowsDirectories
    openPanel.allowedContentTypes = parameters.allowedContentTypes
    
    // 弹出面板，处理用户选择结果
    openPanel.begin { result in
        if result == .OK {
            // 把选中的文件URL返回给WebView
            completionHandler(openPanel.urls)
        } else {
            // 用户取消选择，返回nil
            completionHandler(nil)
        }
    }
}

这个方法的作用是：当网页里的上传按钮被点击时，WebView会调用这个代理方法，我们在这里创建系统原生的NSOpenPanel（也就是Finder窗口），配置好和网页请求一致的选择规则，等用户选完文件后把结果回传给WebView，这样网页就能拿到上传的文件了。

第二步：配置App Sandbox权限 #

光有代码还不够，macOS的沙箱机制会限制App访问文件系统，你需要在项目里开启对应的权限：

1. 打开Xcode，选中你的项目目标（Target），切换到Signing & Capabilities标签页
2. 找到App Sandbox配置项：
   • 在File Access区域，勾选User Selected File的Read/Write权限（这是允许App访问用户手动选择的文件）
   • 如果你的网站支持上传文件夹，还要额外勾选Allow Folder Access
   • 确保Network区域的Outgoing Connections (Client)是开启的（保证WebView能加载外部网站）

修改后的完整Coordinator代码参考 #

这里是添加了文件上传处理后的完整Coordinator类，方便你对比：

public class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
    var parent: WebBrowserView
    init(parent: WebBrowserView) {
        self.parent = parent
    }

    public func webView(_: WKWebView, didFail: WKNavigation!, withError: Error) {
        // ... 你的原有代码
    }

    public func webView(_: WKWebView, didFailProvisionalNavigation: WKNavigation!, withError: Error) {
        // ... 你的原有代码
    }

    public func webView(_: WKWebView, didFinish: WKNavigation!) {
        // ... 你的原有代码
    }

    public func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        // ... 你的原有代码
    }

    public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        decisionHandler(.allow)
    }

    public func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }
        return nil
    }

    // 新增的文件上传处理方法
    public func webView(_ webView: WKWebView, runOpenPanelWith parameters: WKOpenPanelParameters, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping ([URL]?) -> Void) {
        let openPanel = NSOpenPanel()
        openPanel.allowsMultipleSelection = parameters.allowsMultipleSelection
        openPanel.canChooseDirectories = parameters.allowsDirectories
        openPanel.allowedContentTypes = parameters.allowedContentTypes
        
        openPanel.begin { result in
            if result == .OK {
                completionHandler(openPanel.urls)
            } else {
                completionHandler(nil)
            }
        }
    }
}

做完这两步，重新打包你的App，点击网页上的上传按钮应该就能正常弹出Finder窗口啦！

内容的提问来源于stack exchange，提问作者esaruoho