fix(H5): 修复消息输入框无法粘贴图片/文件问题

- 移除 handleDocPaste 中对 target 的检查
- 添加优先使用 clipboardData.files 的逻辑
- 修复 van-field @paste 在某些 H5 环境下不触发的问题
This commit is contained in:
Simon
2026-07-10 11:56:13 +08:00
parent 3d152fc8eb
commit dfc08b2ade
+21 -3
View File
@@ -172,12 +172,30 @@ onUnmounted(() => {
/** /**
* Document 级别粘贴处理(备用方案) * Document 级别粘贴处理(备用方案)
* 做什么:捕获 van-field @paste 未处理的文件粘贴 * 做什么:捕获 van-field @paste 未处理的文件粘贴
* 说明:移除 target 检查,让 handleDocPaste 作为后备方案处理所有文件粘贴
*/ */
async function handleDocPaste(event: ClipboardEvent): Promise<void> { async function handleDocPaste(event: ClipboardEvent): Promise<void> {
// 如果事件目标是输入框,说明 @paste 已经处理,跳过 // 不再检查 target 是否为 textarea
const target = event.target as HTMLElement // 原因:van-field 的 @paste 事件在某些 H5 环境下可能不触发
if (target.tagName === 'TEXTAREA' || target.isContentEditable) return // 此时 document 级别的监听可以作为后备方案
// 优先使用 clipboardData.files(兼容性更好)
const files = event.clipboardData?.files
if (files && files.length > 0) {
event.preventDefault()
console.log('[InputBar] Document级别粘贴检测到文件, 数量:', files.length)
for (const file of Array.from(files)) {
if (file.type.startsWith('image/')) {
await handleImageUpload(file)
} else {
await handleFileUpload(file)
}
}
return
}
// 兼容 clipboardData.items
const items = event.clipboardData?.items const items = event.clipboardData?.items
if (!items) return if (!items) return