html5网站模板 免费/百度搜索引擎排名

1、以下的代码只实现的是单个文件夹的上传，原本需求是实现选择多个文件夹上传，但是我没有找到实现的方法，如果想实现多个文件夹上传，可以给这些文件夹新建一个父级文件，点击上传的时候选择父级文件夹，就能遍历该父级文件夹下的所有自子集文件。
2、放两篇文章连接，文章内容我并没有去实践，有兴趣的可以看看
https://www.cnblogs.com/zyzzz/p/15575784.html
https://www.csdn.net/tags/MtjaQg1sMTMzMTgtYmxvZwO0O0OO0O0O.html

实现的逻辑主要是给input加上webkitdirectory 属性

element-ui 组件的写法

<el-uploadclass="upload-demo"action="#":on-remove="fileRemove":on-change="fileChang"accept="":auto-upload="false":multiple="true":file-list="form.instFilePics"ref="uploadFile"><el-button size="small" type="primary" ><i class="el-icon-folder-opened"></i></el-button>
</el-upload>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},
}

input 的写法

<div class="select-files-btn"><el-button type="primary" @click="choiceFiles"><i class="el-icon-folder-opened"></i></el-button><input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>
</div>methods: {choiceFiles(){//以下代码，有时候写法不同，可在控制台打印一层一层的找inputthis.$refs.filElem.click();},getFile(e){let files = e.target.files;  console.log(files);}
}