Vue 拖拽事件怎么使用 HTML5 拖拽 API 实现文件上传-Vue.js-PHP中文网

Vue中使用HTML5拖拽API实现文件上传，需监听dragover、drop等事件并阻止默认行为，从dataTransfer.files提取文件，结合FormData与Axios上传，同时提供点击选择的降级方案。

vue 拖拽事件怎么使用 html5 拖拽 api 实现文件上传

Vue 中使用 HTML5 拖拽 API 实现文件上传，核心是监听 dragover、drop 等原生事件，并阻止默认行为，再从 event.dataTransfer.files 中提取文件对象。它不依赖第三方库，轻量且兼容性好（IE10+）。

基础拖拽区域搭建

先创建一个可拖入文件的容器，绑定关键事件：

dragover：必须阻止默认行为，否则浏览器会打开文件或导航离开页面
drop：获取拖入的文件列表，进行后续处理（如上传）
dragenter / dragleave（可选）：用于视觉反馈，比如高亮区域

示例模板：

  @dragover.prevent="handleDragOver"
  @drop.prevent="handleDrop"
  @dragenter.prevent="isDragging = true"
  @dragleave.prevent="isDragging = false"
  :class="{ 'drag-active': isDragging }"
>
  拖拽文件到这里上传

在 Vue 组件中处理拖拽逻辑

在 setup 或 methods 中定义响应函数。注意：dataTransfer.files 是 FileList，需转为数组才能用 map 或 forEach：

handleDragOver 只需 event.preventDefault()，保持拖拽状态持续有效
handleDrop 中检查 event.dataTransfer.files.length，过滤掉非文件项（如拖入的网页链接）
推荐对每个 File 对象做基础校验：类型、大小（例如限制

简单实现示例（Composition API）：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

const isDragging = ref(false)
const handleDrop = (e) => {
  const files = Array.from(e.dataTransfer.files)
  if (files.length === 0) return
  files.forEach(file => {
    if (file.type.startsWith('image/')) {
      uploadFile(file) // 自定义上传函数
    }
  })
}

结合上传逻辑（如 Axios）

拿到 File 后，通常用 FormData 构造请求体：

新建 FormData 实例，.append('file', file)
若需多文件，可循环追加，或使用唯一 key 如 file[0]、file[1]
调用 axios.post 时，不能设置 Content-Type，让浏览器自动设置带 boundary 的 multipart/form-data
可监听 onUploadProgress 实现上传进度条

示例上传函数：

const uploadFile = async (file) => {
  const formData = new FormData()
  formData.append('file', file)
  try {
    await axios.post('/api/upload', formData, {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      onUploadProgress: e => {
        console.log(`上传进度：${Math.round((e.loaded / e.total) * 100)}%`)
      }
    })
  } catch (err) {
    console.error('上传失败', err)
  }
}