uni-app如何实现文件拖拽上传 uni-app H5端文件上传进阶-uni-app-PHP中文网

uni-app H5端拖拽上传需用div模拟拖拽区并绑定dragover/drop事件，调用preventDefault()和stopPropagation()，从dataTransfer.files获取文件，通过FormData+uni.uploadFile上传；H5平台必须使用files数组而非filePath，且需条件编译隔离平台差异。

uni-app如何实现文件拖拽上传 uni-app h5端文件上传进阶

uni-app H5端拖拽上传必须绕开 `input type="file"`

原生 input 标签不支持拖拽事件监听，也不能响应 dragover、drop 等行为。强行给它加 ondragover 没用，浏览器会直接拦截默认行为并拒绝触发 drop。真实可行路径是：用普通

 模拟拖拽区 → 手动绑定事件 → 从 event.dataTransfer.files 拿文件 → 走 FormData + uni.uploadFile。关键点：

必须在 dragover 回调中调用 event.preventDefault() 和 event.stopPropagation()，否则 drop 不会触发

drop 事件里只能从 event.dataTransfer.files 取文件，不能用 event.target.files（那是 input 的）
多文件上传时，files 是 FileList，需转成数组再遍历，避免直接用 for...in 遍历出原型链属性
拖拽区样式建议加 outline: 2px dashed #007AFF 和 transition: outline 0.2s，提升反馈感

拖拽后怎么传给 uni.uploadFile？H5平台不用 filePath

uni.uploadFile 在 H5 平台下会忽略 filePath 参数，只认 files 数组。很多人卡在这儿——写了 filePath: file 却一直报错或静默失败。正确写法是把 File 实例塞进 files 字段，并显式指定 name（否则后端收到的字段名可能是 blob）。
示例片段：
const formData = new FormData();
formData.append('file', file, file.name); // 第三个参数是服务端看到的原始文件名
<p>uni.uploadFile({
url: '<a href="https://www.php.cn/link/f142c6067e6345134c6728f299cf4c1e">https://www.php.cn/link/f142c6067e6345134c6728f299cf4c1e</a>',
files: [{ // 注意：是数组，每个元素含 file + name
file: file,
name: 'file' // 后端接收字段名，和 formData.append 的第一个参数一致
}],
formData: { // 其他字段仍走 formData
userId: '123',
category: 'doc'
},
success: res => {
console.log('上传成功', res);
},
fail: err => {
console.error('上传失败', err);
}
});</p>
注意：files 是 uni-app H5 专属字段，App 和小程序端不识别；跨平台项目务必用条件编译隔离。
拖拽上传容易漏掉的三类错误处理
用户拖一个超大视频进来、拖了 20 个压缩包、或中途关了页面——这些场景下没做防御，UI 就会卡死或报错不提示。

											
												
												
													uni-app
													uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。
												
												下载
												
											
										

文件大小限制必须在 drop 后立刻校验，别等进 uploadFile 再靠服务端返回 413；建议单文件 ≤50MB，用 file.size > 50 * 1024 * 1024 判断
重复拖拽同一文件（比如误操作两次 drop），应去重：用 file.name + file.lastModified 做简易 key，存入 Set 缓存
没处理 fail 和 complete 回调：上传失败时 loading 状态不会自动关闭，用户可能反复点击；complete 是唯一能统一收尾的地方（比如隐藏 loading、重置拖拽区样式）

移动端 H5 拖拽上传实际不可用，得降级为点击
绝大多数安卓 WebView 和 iOS Safari 对 dragstart/drop 支持极差，甚至完全禁用。实测在微信内置浏览器、QQ 浏览器、部分国产厂商浏览器中，拖拽区能高亮但松手就无反应。这不是代码问题，是 WebView 原生限制。
解决方案只有两个：

用 uni.getSystemInfo 检测 platform === 'devtools' 或 webView 类型，仅在桌面 Chrome/Firefox 显示拖拽区，其他环境强制显示「点击上传」按钮
按钮内部仍用动态创建 input + click() 触发，兼容性最稳；可配合 accept 属性限制类型，如 accept=".pdf,.doc,.xlsx,image/*"


真正麻烦的是混合场景：同一个 H5 页面既要支持 PC 端拖拽，又要兜底移动端点击，且不能让两套逻辑互相污染。最轻量的做法是用一个 isDragSupported 响应式变量控制 DOM 渲染分支，别试图复用同一套事件监听器。