拖拽批量导入与持久化：File API + OPFS

`title: 拖拽批量导入与持久化：File API + OPFS``categories: Web 开发/前端/数据管理``keywords: Drag and Drop,DataTransfer,File API,OPFS,批量导入``description: 使用拖拽与 File API 批量导入文件，结合 OPFS 进行持久化与去重索引，优化用户数据管理体验。`拖拽接收function setupDrop(el) { el.addEventListener('dragover', e => { e.preventDefault(); }); el.addEventListener('drop', async e => { e.preventDefault(); const files = []; for (const item of e.dataTransfer.items) { if (item.kind === 'file') files.push(item.getAsFile()); } for (const file of files) { const root = await navigator.storage.getDirectory(); const h = await root.getFileHandle(file.name, { create: true }); const w = await h.createWritable(); await w.write(await file.arrayBuffer()); await w.close(); } }); } 去重与索引结合 WebCrypto 计算哈希，索引到 IndexedDB，避免重复存储。