React中监听粘贴事件并获取粘贴板中的截图

TSX中给组件添加监听粘贴事件

const pasteImageRef = useRef<HTMLDivElement>(null);

useEffect(()=>{
	//给组件添加监听粘贴事件
	pasteImageRef.current?.addEventListener('paste', pasteHandler);	
},[]);

<div
  tabIndex={-1} // 设置tabIndex才可以聚焦
  ref={pasteImageRef}
>
  <span>Ctrl+V 粘贴截图</span>
</div>

从粘贴板获取截图文件

const pasteHandler = (e: ClipboardEvent) => {
  const { clipboardData } = e;
  const { items } = clipboardData;
  const { length } = items;

  let blob = null;
  for (let i = 0; i < length; i++) {
    const item = items[i];
    if (item.type.startsWith('image')) {
      blob = item.getAsFile(); // blob中就是截图的文件，获取后可以上传到服务器
    }
  }
};