Vue 3 中处理粘贴图片上传需监听 paste 事件，从 clipboardData.items 提取 image 类型 File 对象，校验后上传；不支持时降级为隐藏 file input；全程前端完成，服务端仅接收标准文件流。
Vue 3 中处理粘贴剪贴板图片上传，核心是监听 paste 事件，从 clipboardData.items 提取图片文件，再走标准上传流程。它不依赖用户点击或拖拽，适用于截图后 Ctrl+V、微信/QQ 粘贴图、甚至网页复制图片等场景，体验更自然。
监听 paste 事件并提取图片
在目标区域（如输入框、富文本容器、自定义上传区）绑定 @paste，拦截事件后遍历剪贴板项：
- 用
event.clipboardData?.items获取所有剪贴板内容项 - 筛选
item.kind === 'file'且item.type.startsWith('image/')的项 - 调用
item.getAsFile()转为标准File对象，后续可直接用于上传或预览
示例代码片段：
粘贴区
注意：该操作必须在安全上下文（HTTPS / localhost / 127.0.0.1）中运行；若在非编辑区域监听，建议加 contenteditable="false" 防止意外聚焦。
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
兼容性兜底：input + hidden file 方案
部分旧版浏览器或受限环境不支持直接读取 clipboardData，此时可用「隐藏 input」作为备用入口：
- 放置一个
<input type="file" accept="image/*" style="display:none" ref="pasteInputRef"> - 在 paste 事件中，模拟一次
click()触发文件选择器 - 用户手动选中剪贴板刚存的截图（如 Windows 截图默认保存在“图片\屏幕截图”），完成间接上传
这不是全自动方案，但能覆盖 navigator.clipboard 不可用的边界情况，提升整体健壮性。
上传前校验与格式处理
拿到 File 后别急着传，先做轻量检查和优化：
- 校验类型：
/^image\/(png|jpe?g|gif|webp)$/i.test(file.type) - 限制大小（如 ≤5MB）：
if (file.size > 5 * 1024 * 1024) { ... } - 可选压缩：用 canvas 重绘缩放，生成新 Blob，减小上传体积与 OCR 延迟
- 生成预览 URL：
URL.createObjectURL(file)，立即显示缩略图提升反馈感
集成到上传逻辑中
提取并校验后的 File，可无缝接入任意上传体系：
- 配合
el-upload：构造UploadRawFile对象，调用handleUpload或触发http-request - 搭配自定义请求：用
FormData.append('file', file)发送 axios 请求 - 对接 OCR 场景：上传前转成 base64 或 FormData，传给识别接口，识别完成后回填文本
整个过程无需后端配合剪贴板，纯前端完成解析与转发，服务端只接收标准 multipart 文件流。
