前端支持文件夹上传

前端支持文件夹上传

环境：vue2.0 + axios

1.webkitdirecetory属性

最核心的在于<input>标签上，type类型为file，添加webkitdirecetory属性，即可调出文件夹选择的窗口了

2.HTML部分

// 按钮用于触发弹出文件选择窗口
<el-button @click="addFinderToList">添加文件夹</el-button>
// 原来的按钮样式太丑了，所以隐藏掉
<input type="file" id="folder" ref="folder" webkitdirectory @change="getFolder" 
style="display: none;">

3.JS部分

methods: {
	addFinderToList() {
	    this.$refs.folder.click()
	},
	getFolder(e) {
	    //e.target.files为文件夹里面的文件
	    // 把文件夹数据放到formData里面，下面的files和paths字段根据接口来定
	    var form = new FormData()
	    e.target.files.forEach(file => {
	    	form.append('files', file)
	    	form.append('paths', file.webkitRelativePath)
	    })
	    this.$http.post('上传的url', form).then(res => {
	    	// 上传成功后的操作
			......
		}).catch(err => {
			// 上传失败后的操作
			......
		}).finally(() => {
			//无论上传成功与否，都把已选择的文件夹清空，否则选择同一文件夹没有反应
			document.getElementById('folder').value = ''
		})
	}
}