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

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

element-ui 组件的写法
<el-upload
		class="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(){
		//以下代码,有时候写法不同,可在控制台打印一层一层的找input
		this.$refs.filElem.click();
	},
	getFile(e){
		 let files = e.target.files;  
		 console.log(files);
	}
}


Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐