antd-vue 实现仿钉钉同时上传文件和文件夹

最新推荐文章于 2025-03-17 21:38:19 发布

小狐狸和小兔子

最新推荐文章于 2025-03-17 21:38:19 发布

阅读量1.7k

点赞数

分类专栏： Vue.js 前端 Ant Design Vue 文章标签： antd上传文件和文件夹

本文链接：https://blog.youkuaiyun.com/qq_27331631/article/details/109583503

版权

本文介绍了如何使用Ant Design Vue组件库实现类似钉钉的文件和文件夹上传功能。在 Electron 应用中，通过自定义逻辑控制文件选择对话框的触发，以达到同时上传单个文件和整个文件夹的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在模仿钉钉，做一个企业内部沟通管理软件，技术使用了 Ant Design Vue 、Electron，功能主要有聊天、文档、通讯录、工作台，对于钉钉的上传文件，既有单个文件，也有文件夹，如图
在这里插入图片描述
于是自己摸索着也实现了一个，直接上代码

<a-upload
 ref="upload"
  class="dd-display-inline"
  :show-upload-list="false"
  :directory="isDirectory"
  :open-file-dialog-on-click="isOpenFile"
  :custom-request="uploadFile"
>
  <a-dropdown v-show="!isDel">
    <!--文件-->
    <a-menu slot=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小狐狸和小兔子

关注关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

基于 vue、ant-design-vue 的自定义Antdv 工作流组件

06-26

基于 vue、ant-design-vue 的自定义Antdv 工作流组件。支持在线流程设计器，钉钉审批模式，支持流程办理、退回、自由流、会签、并行、串行、服务任务等。

使用antd的upload组件上传文件的时候如何同时传文件和要存的数据库表名。（即post方式如何传多个参数）

QYHuiiQ

10-27

6761

解决方法，先定义一个变量赋值参数paramData，然后在props里面加上data属性即可。 render(){ var paramData = {'tableName':'team'}; const props = { actions: '/xxx/yyy', //controller中的requestMapping name: 'file'...

1 条评论您还未登录，请先登录后发表或查看评论

单个及批量上传文件和文件夹思路——AntDesign

最新发布

qq_45327886的博客

03-17

547

axios直接传文件夹报错： net::ERR_FILE_NOT_FOUND；单个、批量点击、拖拽上传文件及文件夹思路

springboot+antd实现多文件、文件夹上传下载

Junibl1231的博客

04-07

1529

springboot+vue+antd实现文件、文件夹上传

利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)

qq_36384745的博客

12-17

1746

利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)

使用ant design vue的a-upload上传组件，自定义上传事件，点了导入图标按钮就自动打开了电脑上的文件夹，将选中的.json文件里的数据解析出来页面使用（纯前端操作）

weixin_61977924的博客

11-02

2221

reader.readAsText(data.file)中data.file的数据格式为。使用FileReader对象读取文件内容，最后将文件内容进行处理使用。

管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip

02-25

【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...

vue-antd-pro:vue + ant-design-vue创建后台管理系统模板

03-11

欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。安装依赖安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行运行数据mock服务 // enter server ...

vue3-antd-admin:基于vue-clivite + vue3.0 + ant-design-vue2.0 +打字稿钩子的基础后台管理系统模板RBAC的权限系统，JSON架构动态表单，动态表格，漂亮的锁屏界面

03-11

使用了Vue3.0全家桶，ant-design-vue2.0和typescript4.0，实践vue3.0的新特性以及玩法，不得不说vue3.0的组成API比例于vue2.0的Options API灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用hooks的...

仿钉钉审批流程设置vue3版本.zip

07-21

对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同...

Vue 仿钉钉流程图（流程节点绘制 vue+Ant【如果用其他UI库需要替换几个组件】附 demo）

热门推荐

xiaoyaoluntian的博客

09-29

2万+

仿钉钉流程图（流程节点绘制 vue+Ant Design of Vue）仿钉钉流程图 Api包括：一维数组传参，获取单节点数据，返回所有节点组成的一位数组生成每个节点的父节点Id集合很多公司后台管理系统都需要画流程图，功能大同小异，所以，仿照钉钉管理系统花了一个流程图效果如下以下为此插件入口与出口的数据结构，暴露的事件以及公共类所在目录及修改方式（小部分需要修改源代码，不难找，有问题可以call我）入口数据格式整个流程图分为四种节点分别为 root en

仿钉钉组织架构通讯录功能

05-07

仿钉钉组织架构通讯录功能，实现方式由fragment的回退栈实现，常见的同一个标题头部，内容不一致的分布操作或是展示皆可参考

antd 选择文件夹_antd pro 下的文件下载

weixin_39904587的博客

01-26

497

概要前端上传文件的例子很多, 但是下载相关的例子不多, 主要是因为下载本身比较简单.但是这次做了个文件导出功能, 接收文件流的时候弄了很长时间也没有成功, 就因为请求中缺了个配置…示例后端后端比较简单, 不管有多少需要计算的业务, 最终只是返回文件流.下面的示例是通过 golang gin 框架实现的.1 package main23 import (4 "strconv"56 "gi...

企业级仿钉钉低代码工作流引擎开源啦

周国通的博客

08-18

2789

历经两个多月没日没夜的肝,AntFlow第一个里程碑版本开源啦.包括前端和后端代码,功能完整前端gitee地址后端github地址后端gitee镜像地址AntFlow 是一款基于activiti的、✈久经生产环境考验的、企业级低代码工作流引擎平台。可独立部署，也可以做为模块嵌入到现有系统中。使用简单，易于维护，前端只需要简单点击和选择即可完成流程配置，后端只需要实现一个接口即可新开发出一条业务流程！

【ant-design】Upload组件如何上传文件的同时，上传其他数据

hzxOnlineOk的博客

02-15

500

使用formData的形式传参即可实现。

antd 选择文件夹_antd 和 element上传文件详解与FormData详解

weixin_39938875的博客

12-19

1472

背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：ant design 手动上传文件antd官网有手动上传的demo:在这里简单写一写实现，主要有在jsx中引入Upload组件，将 fileList 作为props传入，fileList为选择的文件列表，和上传...

antd 选择文件夹_antd 组件按需引入

weixin_39601194的博客

02-06

736

antd官方只给出了使用create-react-app创建但没有使用npm run eject命令项目的按需引入办法，但是出于个性化定制，实际项目中很多都会运行npm run eject命令。npm run eject的项目如何按需引入？按需引入，需要使用插件babel-plugin-import 来完成，步骤如下：1.运行npm i -S babel-plugin-import2.打开根目录的...

antd 选择文件夹_react-antd项目中多文件上传限制

weixin_30740019的博客

12-29

994

需求：一个附件列表，带上传功能，在上传时要求总附件数量不超过3个分析：在上传时进行before验证，在onChange函数中进行计数清零及文件处理场景：1，没有文件，上传数量《=3，可一次性传完2，没有文件，上传数量》3，提示数量超过3个，不上传，列表为空3，有文件数量为1，上传数量《=2，可一次性传完4，有文件数量为1，上传数量》2，提示数量超过3个，不上传，列表不变基于以上场景，我们的思路是，...

【vue】AntDV组件库中a-upload实现文件上传：

SunPeng的博客

11-15

4241

【vue】AntDV组件库中a-upload实现文件上传：

antd-vue多文件上传

01-14

### 使用 Antd-vue 实现多文件上传为了实现多文件上传功能，在 `main.js` 中除了引入必要的组件外，还需要确保正确配置并使用 `Upload` 组件[^1]。下面是一个完整的示例来说明如何利用 antd-vue 创建一个多文件上传的功能： #### 修改 main.js 文件 ```javascript import Vue from 'vue'; // 引入 Upload 和其他所需组件 import { Upload, message } from 'ant-design-vue'; Vue.use(Upload); Vue.prototype.$message = message; new Vue({ render: h => h(App), }).$mount('#app'); ``` #### 编写模板部分 (template) 在对应的 `.vue` 文件内定义 HTML 模板结构: ```html <template> <a-upload name="file" :multiple="true" action="/your/upload/endpoint" @change="handleChange"> <a-button> <a-icon type="upload" /> Click to upload </a-button> </a-upload> </template> ``` 这里设置了 `name` 属性用于指定服务器端接收参数的名字；`:multiple=true` 表明允许一次选择多个文件；而 `action` 则指定了文件提交的目标 URL 地址。 #### 添加脚本逻辑 (script) 继续在同一 `.vue` 文件中编写 JavaScript 处理函数: ```javascript <script> export default { methods: { handleChange(info) { const status = info.file.status; if (status !== 'uploading') { console.log(info.file, info.fileList); } if (status === 'done') { this.$message.success(`${info.file.name} file uploaded successfully.`); } else if (status === 'error') { this.$message.error(`${info.file.name} file upload failed.`); } }, }, }; </script> ``` 此段代码实现了当文件状态改变时触发回调，并根据不同情况给出相应提示信息。通过上述设置即可完成基于 antd-vue 的多文件上传功能。需要注意的是实际部署环境中应当替换 `/your/upload/endpoint` 为真实的 API 接口地址。