web前端之上传文件夹、webkitdirectory

MENU

前言

1、以下代码只实现的单个文件夹的上传，原本需求是实现选择多个文件夹上传，但是没找到实现的方法。如果想实现多个文件夹上传，可以给这些文件夹新建一个父级文件夹，点击上传的时候选择父级文件夹，就能遍历该父级文件夹下的所有子集文件夹，这样就能实现多个文件夹上传了。
2、其他文章链接，文章内容并没有去实践，有兴趣的伙伴可以看看。

element-ui写法

html

<el-uploadclass="upload-demo"action="#":on-remove="fileRemove":on-change="fileChang"accept="":auto-upload="false":multiple="true":file-list="form.instFilePics"ref="uploadFile"><el-buttonsize="small"type="primary"><iclass="el-icon-folder-opened"></i></el-button></el-upload>

JavaScrip

data(){return{form:{instFilePics:[],instFile:[]},}},mounted(){// 以下代码有时候可能写法不同，// 可在控制台打印一层一层的找input，// 再加webkitdirectory属性this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory =true;},
methods：{fileChang(file, fileList, name){this.form.instFilePics = fileList;},fileRemove(file, fileList, name){this.form.instFilePics = fileList
    },}

解析

**html
01、

<el-upload>

是一个Element UI的上传组件，用于上传文件。
02、

class="upload-demo"

为上传组件添加一个CSS类，用于样式定制。
03、

action="#"

指定上传的服务器地址，这里设置为#，表示不进行实际的上传操作。
04、

:on-remove="fileRemove"

监听文件被移除的事件，当文件被移除时，调用fileRemove方法。
05、

:on-change="fileChang"

监听文件变化的事件，当文件发生变化时，调用fileChang方法。
06、

accept=""

指定可以上传的文件类型，这里为空，表示不限制文件类型。
07、

:auto-upload="false"

设置为false表示上传操作不会自动进行，需要手动触发。
08、

:multiple="true"

设置为true表示支持多文件上传。
09、

:file-list="form.instFilePics"

绑定一个文件列表，这个列表将显示在上传组件中。
10、

ref="uploadFile"

为上传组件设置一个引用，可以在Vue实例中通过this.$refs.uploadFile访问到这个组件。**

---

**JavaScrip
1、

data()

定义组件的数据，其中form对象包含两个数组，instFilePics用于存储上传的文件列表，instFile可能用于其他文件上传的数组。
2、

mounted()

在组件挂载到DOM后执行，通过

this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;

设置文件输入框支持选择文件夹。
3、

methods

定义两个方法，fileChang和fileRemove。
3.1、

fileChang(file, fileList, name)

当文件列表发生变化时，更新

form.instFilePics

为最新的文件列表。
3.2、

fileRemove(file, fileList, name)

当文件被移除时，更新

form.instFilePics

为最新的文件列表。**

---

总结
代码段实现一个文件上传组件，用户可以选择文件或文件夹进行上传，上传的文件列表会显示在界面上。通过fileChang和fileRemove方法，可以处理文件列表的变化和文件的移除操作。

input写法

html

<divclass="select-files-btn"><el-buttontype="primary"@click="choiceFiles"><iclass="el-icon-folder-opened"></i></el-button><inputref="filElem"type="file"multipleclass="upload-file"webkitdirectory@change="getFile"/></div>

JavaScrip

methods:{choiceFiles(){// 以下代码有时候写法不同，// 可在控制台打印一层一层的找inputthis.$refs.filElem.click();},getFile(e){let files = e.target.files;  
         console.log(files);}}

解析

**html
1、

<div class="select-files-btn">

是一个包含按钮和文件输入框的容器。
2、

<el-button type="primary" @click="choiceFiles">

是一个Element UI的按钮组件，类型为primary，表示按钮是主要操作按钮。

@click="choiceFiles"

是一个事件监听器，当按钮被点击时，会调用Vue实例中的choiceFiles方法。
3、

<i class="el-icon-folder-opened"></i>

是一个图标，使用Element UI的图标类，显示一个打开的文件夹图标。
4、

<input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>

是一个文件输入框，允许用户选择多个文件(multiple属性)。

ref="filElem"

是一个Vue的引用，允许在Vue实例中直接访问这个DOM元素。

webkitdirectory

属性允许用户选择文件夹，而不是单个文件。

@change="getFile"

是一个事件监听器，当文件选择框的值发生变化时，会调用Vue实例中的getFile方法。**

---

**JavaScrip
1、

choiceFiles()

方法会在用户点击按钮时被调用。它通过

this.$refs.filElem.click()

模拟点击文件输入框，允许用户选择文件而不直接点击输入框。
2、

getFile(e)

方法会在文件输入框的值发生变化时被调用(即用户选择了文件后)。

e.target.files

包含用户选择的所有文件，然后这些文件会被打印到控制台。**

---

总结
代码段提供一个用户界面，允许用户通过点击一个按钮来选择文件或文件夹，并在选择后将文件信息打印到控制台。这通常用于文件上传功能。