vue2 element-ui文件夹上传

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);
	}
}


评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值