VS Code扩展中如何捕获从资源管理器拖到Webview的文件URI？

VS Code资源管理器的拖拽逻辑和系统文件管理器（如Finder）存在差异，不会将文件数据存入dataTransfer.files，可通过以下方法处理：

• 必须先处理onDragOver事件
  需在onDragOver中调用event.preventDefault()和event.stopPropagation()，否则onDrop事件无法触发，VS Code也不会传递拖拽数据：

  const handleDragOver = (event) => {
    event.preventDefault();
    event.stopPropagation();
  };
  

• 从dataTransfer的自定义格式中提取文件路径
  VS Code拖拽文件时，会将文件URI存入text/uri-list或自定义的application/vnd.code.tree.sidebar格式，可直接从这些格式读取数据：

  const handleDrop = (event) => {
    event.preventDefault();
    event.stopPropagation();
    
    // 获取原生事件对象
    const nativeEvent = event.nativeEvent;
    // 尝试读取URI列表
    const uriList = nativeEvent.dataTransfer.getData('text/uri-list');
    if (uriList) {
      // 通常为单个URI，分割后取第一个值
      const fileUri = uriList.split('\n')[0];
      // 转换file://开头的URI为本地路径
      const filePath = decodeURIComponent(fileUri.replace('file://', ''));
      console.log('拖拽的文件路径:', filePath);
    }
    
    // 适配部分VS Code版本的自定义格式
    const vscodeData = nativeEvent.dataTransfer.getData('application/vnd.code.tree.sidebar');
    if (vscodeData) {
      const parsedData = JSON.parse(vscodeData);
      // parsedData中包含文件URI等信息，如parsedData.uri
      console.log('VS Code拖拽数据:', parsedData);
    }
  };
  

• 转换为工作区相对路径
  Webview无法直接调用VS Code API，若需将绝对路径转为工作区相对路径（如./todos.json），需通过消息传递给扩展端处理：

  1. Webview端发送消息：

     const vscode = acquireVsCodeApi();
     // 获取fileUri后发送给扩展
     vscode.postMessage({
       type: 'getRelativePath',
       uri: fileUri
     });
     

  2. 扩展端（TypeScript）接收并处理：

     webviewPanel.webview.onDidReceiveMessage(async (message) => {
       if (message.type === 'getRelativePath') {
         const uri = vscode.Uri.parse(message.uri);
         const relativePath = vscode.workspace.asRelativePath(uri);
         // 将相对路径回传给Webview
         webviewPanel.webview.postMessage({
           type: 'relativePathResult',
           path: relativePath
         });
       }
     });
     

  3. Webview端监听消息获取结果：

     window.addEventListener('message', (event) => {
       if (event.data.type === 'relativePathResult') {
         console.log('相对路径:', event.data.path);
       }
     });
     

• 调试技巧
  可打印dataTransfer的所有可用格式，确认VS Code传递的数据格式：

  const availableFormats = Array.from(nativeEvent.dataTransfer.types);
  console.log('可用的拖拽格式:', availableFormats);
  

  根据打印结果，针对性调用getData()获取对应数据。

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