如何用SwiftUI .onDrop()接收Safari网页拖拽的图片

当从Safari网页拖拽图片时，它不会像Chrome/Firefox那样直接提供.url或.fileURL类型的数据，而是优先使用**UTType.image**（对应传统的kUTTypeImage）作为拖拽数据的类型，这就是你之前代码中providers为空的核心原因——指定的UTType不匹配。

下面是修复后的完整实现代码，同时兼容直接拖拽图片数据和图片URL两种场景：

import SwiftUI
import UniformTypeIdentifiers

struct DropImageView: View {
    @State private var isTarget = false
    @State private var draggedImage: Image?
    
    var body: some View {
        VStack {
            draggedImage?
                .resizable()
                .scaledToFit()
                .frame(maxWidth: 300, maxHeight: 300)
            
            Text("拖拽图片到这里")
                .padding()
                .background(isTarget ? Color.blue.opacity(0.2) : Color.gray.opacity(0.2))
                .cornerRadius(8)
        }
        .onDrop(of: [.image, .url], isTargeted: $isTarget) { providers -> Bool in
            // 优先处理直接的图片数据
            if let imageProvider = providers.first(where: { $0.hasItemConformingToTypeIdentifier(UTType.image.identifier) }) {
                imageProvider.loadItem(forTypeIdentifier: UTType.image.identifier, options: nil) { data, error in
                    guard let data = data as? Data, let nsImage = NSImage(data: data) else { return }
                    DispatchQueue.main.async {
                        self.draggedImage = Image(nsImage: nsImage)
                    }
                }
                return true
            }
            
            // 处理图片对应的网络URL
            if let urlProvider = providers.first(where: { $0.hasItemConformingToTypeIdentifier(UTType.url.identifier) }) {
                urlProvider.loadItem(forTypeIdentifier: UTType.url.identifier, options: nil) { data, error in
                    guard let urlData = data as? Data, let url = URL(dataRepresentation: urlData, relativeTo: nil) else { return }
                    DispatchQueue.global().async {
                        if let imageData = try? Data(contentsOf: url), let nsImage = NSImage(data: imageData) {
                            DispatchQueue.main.async {
                                self.draggedImage = Image(nsImage: nsImage)
                            }
                        }
                    }
                }
                return true
            }
            
            print("no provider available")
            return false
        }
    }
}

关键细节说明： #

• 拖拽类型同时声明.image和.url，覆盖Safari的两种拖拽逻辑：直接传递图片二进制数据、附带图片的网络URL
• 优先处理UTType.image类型，这是Safari拖拽网页内图片或本地图片时的默认类型
• loadItem的回调在后台线程执行，所有UI更新必须切换回主队列
• 若需要处理更多边缘场景，还可以补充UTType.fileURL类型，兼容本地图片文件的拖拽

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