在做项目开发的时候,上传东西无论文件也好,还是文件夹都需要用到
<input type="file" id="filepicker" name="fileList" multiple />
这次公司要做文件及文件夹上传的需求,文件上传之前使用的是ElementUi封装好的组件一步到位如果感兴趣可以去看下,等到文件夹上传,则有些惆怅了。网上搜了很多资料但发现都不尽如意,甚至有的好坑!!!!!!!!一气之下我自己写了这个博客,虽然可能也有糟点,但尽我所能吧,虽然在网上没搜到自己想要的,但也学到了不少;
input其实有不少属性,对于上传文件则需特别对待其中webkitdirectory这个属性还是蛮重要的,是上传文件夹的必备条件。我们在vue当中可以直接使用该标签也可以封装成组件,根据自己项目需求而定,但,使用该属性有个纠结点,就是部分浏览器,不支持此属性,这个需要注意了,由于楼主项目仅需支持chrome,firefox,edge,opera,故上网上搜了下兼容性,发现真爽,刚好符合,哈哈哈哈哈,亲测有效
那么我们使用该标签后接下来怎么办?若说下次见,我是不是要被喷死
 <a v-if="isShowChromeTip" href="javascript:;" class="input-file input-fileup" >
   <i class="iconfont icon-beike"></i>&nbsp;选择文件夹<input ref="file"  class="fileUploaderClass" type='file' name="file" webkitdirectory style="position: absolute;left: 50%;top: 20px;" @change.stop="changesData"/>
 </a>
这个是在模板里面的代码,我们在触发事件后会需要调用一个函数,函数里面可以通过
changesData () {
        console.log(this.$refs.file.files);
      }
来获取所上传的文件,也就是说,在我们做文件上传的时候是会得到所上传的文件的,并且有个点我们需要注意下,就是得到的文件是个集合,浏览器会自动把文件夹里面无论是一级嵌套文件,还是多级嵌套文件都会遍历出来,也就是说,在你选择使用该属性的时候,浏览器会直接获取访问该文件多有内容的权限,听起来似乎有安全问题,但看要你应用什么场合了,接着我们拿到文件就可以为所欲为了,由于得到的文件是个集合,若有需要增加附属其他属性,最好对集合遍历下(其实集合里面的每个元素就是你上传的文件)在你上传给后台的时候一定要注意!
文件你都拿到了,那么接下来就是你往后台传送东西了由于一些东西不方便拿出来就不贴代码了,其实有时候有些东西看起来很简单,但做的时候确实,遇到一点东西就恶心一下。
--------------------- 
版权声明:本文为CSDN博主「踩菜才材」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_41313389/article/details/88016677

功能展示:

批量上传文件

数据库记录

Mac控件安装教程与演示说明:

http://t.cn/AijgiFgW

http://t.cn/Aijg6z08

Linux控件安装教程与演示说明:

http://t.cn/Aijg6Lv3

http://t.cn/Aijg64k6

控件包下载:

MacOS:http://t.cn/Aijg65dZ

Linux:http://t.cn/Aijg6fRV

cab(x86):http://t.cn/Ai9pmG8S

cab(x64):http://t.cn/Ai9pm04B

xpi:http://t.cn/Ai9pubUc

crx:http://t.cn/Ai9pmrcy

exe:http://t.cn/Ai9puobe

示例下载:

php: http://t.cn/Ai9p3CKQ

在线教程:

php-文件管理器教程:http://t.cn/AiNhmilv

个人博客:http://t.cn/AiY7heL0

www.webuploader.net

vue+上传文件夹的更多相关文章

  1. 上传文件夹 vue

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...

  2. SFTP 上传文件夹

    使用sftp上传文件夹时若使用如下命令并不work: put /media/Research/GWAS_Class/* Desktop/ 此时,需要添加一个参数 -r, 另外在目标文件夹下面建立一个同 ...

  3. 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...

  4. svs 在创建的时候 上传文件夹 bin obj 这些不要提交

    svs  在创建的时候 上传文件夹 bin  obj  这些不要提交  右键-去除版本控制并增加到忽略列表

  5. SpringBoot 上传文件夹

    前端代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. oss上传文件夹-cloud2-泽优软件

    泽优软件云存储上传控件(cloud2)支持上传整个文件夹,并在云空间中保留文件夹的层级结构,同时在数据库中也写入层级结构信息.文件与文件夹层级结构关系通过id,pid字段关联. 本地文件夹结构 文件 ...

  7. MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文 ...

  8. msysgit 上传文件夹,规范化的日常

    在我们第一次成功的上传到github之后,要上传文件夹的我们要在msysgit里输入些什么呢? 选择要上传的文件夹前一项右键点击git bash here 进入msysgit后 首先初始化,输入 gi ...

  9. asp.net FileUpload上传文件夹并检测所有子文件

    1.在FileUpload控件添加一个属性 webkitdirectory=""就可以上传文件夹了 <asp:FileUpload ID="FileUpload1& ...

随机推荐

  1. X86驱动:恢复SSDT内核钩子

    SSDT 中文名称为系统服务描述符表,该表的作用是将Ring3应用层与Ring0内核层,两者的API函数连接起来,起到承上启下的作用,SSDT并不仅仅只包含一个庞大的地址索引表,它还包含着一些其它有用 ...

  2. Java开发Hbase示例

    Java开发Hbase示例 使用Hbase操作数据 package com.sunteng.clickidc.test; import java.io.IOException; import java ...

  3. Visual Studio 2013/15/17小技巧

    1.Ctrl + F10 可以直接运行到光标处,而不用F10 逐过程 F11 逐语句了 2.当有多个断点时,按F5可以切换到下一个断点. 3.Ctrl+Shift+空格 显示函数签名,上下键可以查看所 ...

  4. HTML 标签入门

    HTML 简介 定义: 超文本标记语言(html)是标准通用标记语言下的一个应用,也是一种规范,一种标准 它通过标记符号来表示网页中的各个部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符, ...

  5. Flask基础原理

    一.Flask简介 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架. Werkzeug的本质是Socket服务端,用于接收http请求并对请 ...

  6. Jerry Wang从2017年到2019年的自由泳学习笔记

    打腿 把注意力调整到脚部,尽量不要让他打出水面,因为在空气中大腿完全是无用功,但是如果只是脚跟出水一点,倒也没什么关心,但是主观上,要控制一下,如果你听到你的打腿是"咚咚咚咚"这样 ...

  7. mysql8.0授权远程登录

    之前一直用mysql5.6 远程授权登录,后来换mysql8.0原来的授权方式报错 mysql> grant all privileges on *.* to 'root'@'%' identi ...

  8. 【Linux】修改CentOS7启动方式

    ## 查看当前系统的默认启动方式: systemctl get-default ## 查看如下文件 cat /etc/inittab 可以看到 此文件中提示了如何进行修改默认的启动方式 ## 命令行启 ...

  9. Python面向对象Day1

    一.面向对象初始 面向过程变成属于流水式 面向对象是一种思想 结构上理解面向对象:两部分 class A: # 类 name = '小明' # 静态属性,静态变量,静态字段,或者属性.变量.字段 de ...

  10. Tkinter关于新建窗口内Entry无法获取值(值全为空)的解决办法

    最近在做Python的课程作业,遇到一个问题,描述如下: 使用Python内置的Tkinter模块进行GUI编程 给一个按钮(或菜单)绑定事件,打开一个新窗口,新窗口内有Entry若干,通过textv ...