Figma插件开发报错：Uncaught Error: Cannot wrap function

问题场景 #

开发Figma插件时，要实现选择图片后点击上传、控制台打印文件数据的功能，但通过postMessage传递文件数据时触发报错：

7068-b259bcf26459713c.min.js.br:1071 Uncaught Error: Cannot wrap function

相关代码：

ui.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Figma Plugin</title>
</head>
<body>
  <h2>Image Uploader</h2>
  <input type="file" id="imageInput" accept="image/*" multiple>
  <button id="upload">Upload</button>
  <script>
    document.getElementById('upload').onclick = () => {
      const input = document.getElementById('imageInput');
      console.log(input.files)
      const files = input.files;
      parent.postMessage({ pluginMessage: { type: 'upload-images', files } }, '*');
    };
  </script>
</body>
</html>

code.ts #

figma.showUI(__html__);

figma.ui.onmessage = async (msg) => {
    if (msg.type === 'upload-images') {
        const files = msg.files;
        // Handle the uploaded image files here
        console.log('Uploaded files:', files);
    }

    figma.closePlugin();
};

问题原因 #

Figma插件的UI层和主插件代码（沙箱环境）之间的postMessage通信，仅支持可JSON序列化的数据。而FileList和File对象包含不可序列化的函数、内部引用等特殊属性，直接传递会触发这个“无法包装函数”的错误。

解决方法 #

在UI层把File对象转成可序列化的格式（比如Base64字符串），再传递给主插件代码。

修改后的代码 #

ui.html（更新脚本部分）

<script>
document.getElementById('upload').onclick = async () => {
  const input = document.getElementById('imageInput');
  // 把FileList转成数组便于遍历
  const files = Array.from(input.files);
  // 批量将File转成包含base64的对象
  const fileDataList = await Promise.all(files.map(async file => {
    return {
      name: file.name,
      type: file.type,
      base64: await fileToBase64(file)
    };
  }));
  
  // 传递序列化后的文件数据
  parent.postMessage({ pluginMessage: { type: 'upload-images', files: fileDataList } }, '*');
};

// 辅助函数：把File转成Base64字符串
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}
</script>

code.ts（更新消息处理逻辑）

figma.showUI(__html__);

figma.ui.onmessage = async (msg) => {
    if (msg.type === 'upload-images') {
        const files = msg.files;
        // 打印序列化后的文件数据
        console.log('Uploaded files data:', files);
        
        // 可选：把Base64转成Figma可用的Image对象
        for (const file of files) {
            const image = await figma.createImageAsync(file.base64);
            console.log('Created Figma image:', image);
        }
    }
    
    // 注释掉直接关闭插件的代码，否则看不到控制台日志
    // figma.closePlugin();
};

关键修改点 #

• 将FileList转为数组，遍历每个File对象
• 用FileReader把文件内容转成Base64字符串（可JSON序列化）
• 传递包含文件名、类型、Base64的普通对象数组，而非原始File对象
• 移除了figma.closePlugin()，避免插件直接关闭导致无法查看控制台输出

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