从Finder粘贴图片：navigator.clipboard失效而event.clipboardData可用的原因

我在MacOS的Chrome浏览器中实现了一个表单，希望用户可以直接粘贴图片到表单，无需通过上传对话框选择文件。尝试了两种方案：

• 方案1：监听paste事件，从event.clipboardData.files读取剪贴板内容
• 方案2：点击按钮调用navigator.clipboard.read()读取剪贴板内容

测试结果：

• 在浏览器内复制图片时，两种方案均有效
• 从Finder复制图片时，仅方案1可用；方案2中剪贴板内容类型为text/plain，调用navigator.clipboard.readText()只能获取到文件名（如IMG_xxx.jpg）

两种实现代码 #

方案1代码 #

const preview = document.querySelector('#preview')
const base64Textarea = document.querySelector('#base64-data')
const reader = new FileReader()

// 显示图片base64编码和预览图
reader.addEventListener("load", () => {
  // 将图片文件转为base64字符串
  const base64Data = reader.result
  base64Textarea.value = base64Data
  preview.src = base64Data
}, false)

window.addEventListener("paste", e => getPastedFiles(e))
/* 处理粘贴的文件 */
const getPastedFiles = event => {
  console.log("paste")
  const copiedFiles = event.clipboardData.files
  
  if (!copiedFiles.length) {
    return
  }

  const file = copiedFiles[0]
  reader.readAsDataURL(file)    
}

方案2代码 #

const pasteImage = async (button) => {
  const tr = button.parentElement.parentElement
  const clipboardItems = await navigator.clipboard.read()

  var image_blob = null
  for (const item of clipboardItems) {
    const image_types = item.types.filter(type => type.split("/")[0] == "image")
    console.log(item.types)
    if (item.types.includes("text/plain")) {
      text_blob = await item.getType("text/plain")
      console.log(text_blob)
      handleUpdateImage(text_blob, tr)
    }
    if (!image_types.length) continue

    image_blob = await item.getType(image_types[0])
  }

  if (!image_blob) return
  handleUpdateImage(image_blob, tr)
}

const handleUpdateImage = async (blob, tr) => {
  const image_base64 = await blobToBase64(blob)
  const preview = tr.querySelector('.preview')
  const hidden = tr.querySelector('[data-field="image_base64"] > input')
  preview.src = image_base64
  hidden.value = image_base64
  if (preview.style.display == 'none') preview.style.display = 'inherit'
}

差异原因分析 #

两种API的权限逻辑和处理机制存在本质区别：

1. paste事件的clipboardData
   这是浏览器处理粘贴动作时的原生接口，当用户从Finder复制文件并在浏览器内触发粘贴操作时，浏览器会自动将本地文件转换为File对象存入clipboardData.files。因为粘贴动作是用户主动触发的明确交互，浏览器认为这是用户允许网页获取文件内容，所以权限限制宽松，直接提供文件的二进制数据。

2. navigator.clipboard API
   这个异步API有更严格的安全限制。在MacOS上，从Finder复制图片时，系统剪贴板存储的是文件引用而非图片二进制内容。navigator.clipboard.read()只能读取剪贴板中“可直接访问的公开内容”，对于本地文件引用，它只能获取文件名（text/plain类型），无法直接读取本地文件的二进制数据——这是浏览器的安全策略，防止网页在无明确用户交互（比如粘贴动作）的情况下访问本地文件系统，规避隐私和安全风险。

简单来说，navigator.clipboard确实存在无法直接读取本地机器文件内容的限制，而paste事件因为绑定了用户主动的粘贴操作，被浏览器赋予了更高的访问权限。

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