You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Quasar框架是否支持Drag and Drop拖拽文件上传功能?

Quasar 拖拽文件上传支持说明

Quasar 原生支持你提到的拖拽上传文件功能,无需引入第三方依赖,通过官方提供的组件即可快速实现对应效果:

  • 核心使用q-uploader组件,只需添加draggable属性即可开启拖拽上传模式,默认就自带拖拽区域交互、文件拖入识别效果
  • 支持自定义拖拽区域的样式、提示文本,也可通过插槽完全自定义UI,完全匹配你示例图中的展示效果
  • 自带文件类型限制、大小校验、多文件上传、进度展示、失败重试等通用上传能力,可直接对接后端上传接口
  • 如果你需要做高度定制化的拖拽交互,也可以搭配Quasar内置的useDrop组合式API自行实现专属的拖拽上传逻辑

基础使用示例:

<template>
  <!-- 基础拖拽上传配置 -->
  <q-uploader
    draggable
    label="拖拽文件到此处即可上传"
    accept="image/*,.pdf,.doc"
    max-file-size="10 * 1024 * 1024"
    url="你的后端上传接口地址"
  />
</template>

内容的提问来源于stack exchange,提问作者william007

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.26 23:36:02