我原来一直以为给上传功能加一个粘贴图片应该就是一行代码的事。但是当我想要支持CtrlV、又加一个粘贴按钮时才发现居然是两套本质不同的浏览器 API。被动的clipboardData(paste 事件)用户按CtrlV时浏览器派发一个paste事件数据在event.clipboardData里const handlePaste (event: React.ClipboardEvent) { const files Array.from(event.clipboardData?.items || []) .filter((it) it.kind file it.type.startsWith(image/)) .map((it) it.getAsFile()) .filter(Boolean) as File[]; if (files.length) handleFiles(files); };它的特点是不需要权限、所有浏览器都支持。因为是用户主动粘贴浏览器认为这是可信操作。主动的navigator.clipboard.read()(按钮触发)但点按钮读剪贴板不一样用户没按CtrlV是代码主动去读const items await navigator.clipboard.read(); for (const item of items) { const type item.types.find((t) t.startsWith(image/)); if (type) { const blob await item.getType(type); handleFiles([new File([blob], pasted.${type.split(/)[1]}, { type })]); } }代价是首次会弹权限授权框、Firefox 对图片read()支持差。它们是两条路不是同一功能的两种写法。clipboardData(CtrlV)clipboard.read()(按钮)权限弹窗不需要需要浏览器兼容全支持Firefox 图片支持差焦点要求需要(见下)无所谓隐藏最深的坑焦点陷阱onPaste通常绑在某个元素上。但 DOM 元素默认不接收paste事件,除非它可聚焦且已聚焦。于是很多人写成:div tabIndex{0} onPaste{handlePaste}.../div看起来对,实则埋雷:只有当这个 div 被点过、拿到焦点后,CtrlV才生效。而真实用户截完图切回页面时,焦点根本不在上传框上,粘贴静默失败——用户会觉得这功能骗人。正解是把监听挂到window上让页面任意位置都能接住粘贴useEffect(() { if (!enableWindowPaste) return; // 多个上传框时别互相抢事件 const onPaste (e: ClipboardEvent) { /* 同上提取 files */ }; window.addEventListener(paste, onPaste); return () window.removeEventListener(paste, onPaste); }, [enableWindowPaste, items.length]);这些细节我们都落到了 Image2 的上传组件里。结论很简单:粘贴不是一个功能,是两套 API 加一个焦点模型。想做稳,先分清你走的是哪条路。这篇不讲技术细节,讲一个我觉得更有意思的东西:和 AI 一起打磨一个功能,到底是什么体验。起点是一句模糊的需求:能 CtrlV 粘贴上传了,但用户不知道,帮我想几个方案。值得记录的是接下来发生的事——它不是一句话生成代码而是一场来回。它先反问我,而不是急着写。我提到加个粘贴按钮会不会更好,它没有直接照做,而是先把按钮和快捷键是两套剪贴板 API 这件事摊开,列了权限弹窗、浏览器兼容、焦点要求的对比,然后问我:权限弹窗你能接受吗?——把决策权留给我而不是替我拍板。它会主动指出我没问的问题。在看代码时,它发现粘贴监听有个焦点陷阱只有上传框聚焦时CtrlV才生效,而真实场景焦点根本不在那儿。这是我需求里完全没提、自己也没意识到的坑。好的结对对象,价值就在于看见你视野外的东西。选择题用得恰到好处。纠结按钮放哪时它没有替我决定,而是给了三个位置方案、配上文字示意图让我选。我选了标题栏右侧它才据此实现。该给建议时给建议,该让我拍板时让我拍板。它记得收尾。主功能跑通后,它没停,而是继续补了国际化、无障碍 tooltip,甚至主动去核查了几个图标按钮的aria-label——那些我大概率会忘掉的尾巴。四轮下来,最大的感受是:AI 结对的价值不在快,而在它逼着这个小需求暴露出该有的深度——焦点模型、API 取舍、组件通信、i18n、无障碍,一个都没漏。它不是替我思考,而是陪我把一件事想透。这个被磨了四轮后的功能就在 Image2 的图片上传功能里大家有兴趣的可以去体验一下现在的版本欢迎大家提意见。
我原来一直以为给上传功能加一个粘贴图片应该就是一行代码的事。但是当我想要支持CtrlV、又加一个粘贴按钮时才发现居然是两套本质不同的浏览器 API。被动的clipboardData(paste 事件)用户按CtrlV时浏览器派发一个paste事件数据在event.clipboardData里const handlePaste (event: React.ClipboardEvent) { const files Array.from(event.clipboardData?.items || []) .filter((it) it.kind file it.type.startsWith(image/)) .map((it) it.getAsFile()) .filter(Boolean) as File[]; if (files.length) handleFiles(files); };它的特点是不需要权限、所有浏览器都支持。因为是用户主动粘贴浏览器认为这是可信操作。主动的navigator.clipboard.read()(按钮触发)但点按钮读剪贴板不一样用户没按CtrlV是代码主动去读const items await navigator.clipboard.read(); for (const item of items) { const type item.types.find((t) t.startsWith(image/)); if (type) { const blob await item.getType(type); handleFiles([new File([blob], pasted.${type.split(/)[1]}, { type })]); } }代价是首次会弹权限授权框、Firefox 对图片read()支持差。它们是两条路不是同一功能的两种写法。clipboardData(CtrlV)clipboard.read()(按钮)权限弹窗不需要需要浏览器兼容全支持Firefox 图片支持差焦点要求需要(见下)无所谓隐藏最深的坑焦点陷阱onPaste通常绑在某个元素上。但 DOM 元素默认不接收paste事件,除非它可聚焦且已聚焦。于是很多人写成:div tabIndex{0} onPaste{handlePaste}.../div看起来对,实则埋雷:只有当这个 div 被点过、拿到焦点后,CtrlV才生效。而真实用户截完图切回页面时,焦点根本不在上传框上,粘贴静默失败——用户会觉得这功能骗人。正解是把监听挂到window上让页面任意位置都能接住粘贴useEffect(() { if (!enableWindowPaste) return; // 多个上传框时别互相抢事件 const onPaste (e: ClipboardEvent) { /* 同上提取 files */ }; window.addEventListener(paste, onPaste); return () window.removeEventListener(paste, onPaste); }, [enableWindowPaste, items.length]);这些细节我们都落到了 Image2 的上传组件里。结论很简单:粘贴不是一个功能,是两套 API 加一个焦点模型。想做稳,先分清你走的是哪条路。这篇不讲技术细节,讲一个我觉得更有意思的东西:和 AI 一起打磨一个功能,到底是什么体验。起点是一句模糊的需求:能 CtrlV 粘贴上传了,但用户不知道,帮我想几个方案。值得记录的是接下来发生的事——它不是一句话生成代码而是一场来回。它先反问我,而不是急着写。我提到加个粘贴按钮会不会更好,它没有直接照做,而是先把按钮和快捷键是两套剪贴板 API 这件事摊开,列了权限弹窗、浏览器兼容、焦点要求的对比,然后问我:权限弹窗你能接受吗?——把决策权留给我而不是替我拍板。它会主动指出我没问的问题。在看代码时,它发现粘贴监听有个焦点陷阱只有上传框聚焦时CtrlV才生效,而真实场景焦点根本不在那儿。这是我需求里完全没提、自己也没意识到的坑。好的结对对象,价值就在于看见你视野外的东西。选择题用得恰到好处。纠结按钮放哪时它没有替我决定,而是给了三个位置方案、配上文字示意图让我选。我选了标题栏右侧它才据此实现。该给建议时给建议,该让我拍板时让我拍板。它记得收尾。主功能跑通后,它没停,而是继续补了国际化、无障碍 tooltip,甚至主动去核查了几个图标按钮的aria-label——那些我大概率会忘掉的尾巴。四轮下来,最大的感受是:AI 结对的价值不在快,而在它逼着这个小需求暴露出该有的深度——焦点模型、API 取舍、组件通信、i18n、无障碍,一个都没漏。它不是替我思考,而是陪我把一件事想透。这个被磨了四轮后的功能就在 Image2 的图片上传功能里大家有兴趣的可以去体验一下现在的版本欢迎大家提意见。
