前端支持文件夹上传

环境：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 = ''
        })
    }
}