JS实现剪贴板多文件粘贴时仅能识别单个文件如何解决

问题根因 #

• 浏览器剪贴板的 DataTransferItemList（即你代码中的 event.clipboardData.items）是临时对象，仅在 paste 事件的同步执行阶段有效。你在循环中使用 await 做异步读取，第一次异步操作结束后，浏览器已经清空了这个临时列表，后续循环无法拿到剩下的文件对象。
• 代码没有过滤非文件类型的剪贴板项，剪贴板中如果存在文本类内容，调用 getAsFile() 会返回 null，也会导致异常。

修复方案 #

需要先在事件的同步执行阶段，把所有文件对象从剪贴板项里提取出来存到普通数组中，再执行异步转base64的操作，同时要过滤非文件类型的剪贴板项。

JavaScript 代码 #

const inputFileToBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)

  reader.onload = () => resolve(reader.result)
  reader.onerror = error => reject(error)
})

const getBase64Files = async (files) => {
  const base64Files = []  
  
  for (const file of files) {  
     const base64 = await inputFileToBase64(file)
     base64Files.push(base64)
  }
  
  return base64Files
}

document.addEventListener('paste', async (event) => { 
  console.log('pasted')
  // 同步阶段先提取所有文件到普通数组，避免异步后items失效
  const files = []
  for (const item of event.clipboardData.items) {
    if (item.kind === 'file') {
      files.push(item.getAsFile())
    }
  }
  const base64Files = await getBase64Files(files)
  console.log(base64Files)
})

HTML 代码 #

PASTE HERE

内容的提问来源于stack exchange，提问作者João