JS 获取剪切板图片

onpaste 事件

onpaste 事件在用户向元素中粘贴文本时触发。

注意： 虽然使用的 HTML 元素都支持 onpaste 事件，但实际上并非支持所有元素，例如 p 元素， 除非设置了 contenteditable 为 “true”

<p contenteditable="true" onpaste="myFunction()">尝试在段落中粘贴内容</p>

有三种方式可以在元素中粘贴内容：

• 按下 CTRL + V
• 从浏览器的编辑菜单中选择 “Paste（粘贴）”
• 右击鼠标按钮在上下文菜单中选择 “Paste（粘贴）” 命令。

代码实现

document.addEventListener('paste', onPaste);

const onPaste = async (e: any) => {
  if (e.clipboardData && e.clipboardData.items) {
    let items = e.clipboardData.items || [];
    let file = null;
    if (items && items.length) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile();
        }
      }
    }
    console.log(file)
    // 获取文件之后就可以上传服务器或者其他操作啦
  }
}