1. 将 Element-ui 中的 Upload 组件引入项目,添加 ref 属性
2. 页面初始化时,通过 this.$refs.uploadFile 获取上传组件内部 input标签 并将其 webkitdirectory 属性设置为true,以实现上传文件夹功能。
mounted() {
this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
},
代码至此,只有通过点击上传文件夹,才能在 onchange 事件中获取到文件夹内每个文件的数据信息,拖拽上传不触发 onchange 事件。
3. 我们可以利用拖拽触发 "drop事件" 来实现本功能,主要为以下三步:
第一步:监听 el-upload-dragger 的drop事件,利用 e.dataTransfer.items 取到上传的每一项文件或文件夹
第二步:循环遍历,判断是文件还是文件夹,如果为文件夹则递归调用getFileFromEntryRecursively 函数,直到所有文件判断结束
第三步:使用 item.webkitGetAsEntry() 获取到文件夹,并使用 reader 读取文件夹中的所有文件
第四步:将获取到的所有 file 根据后端需要的格式进行接口调用即可
详细代码如下:
<body>
<div id="app">
<el-upload class="upload-demo a" ref="uploadFile" drag action="" multiple :auto-upload="false"
:on-change="onFileChange" :multiple="false" :file-list="fileList" :show-file-list="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
<script src="../jquery.min.js"></script>
<script src="../vue.js"></script>
<script src="../element.js"></script>
<script>
new Vue({
el: '#app',
data: {
fileList: []
},
mounted() {
this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
this.$nextTick(() => {
let that = this
document.querySelector(".el-upload-dragger").addEventListener("drop", function (e) {
let items = e.dataTransfer.items;
// console.log("item",items);
for (let i = 0; i <= items.length - 1; i++) {
let item = items[i];
console.log('item', item.webkitGetAsEntry());
if (item.kind === "file") {
let entry = item.webkitGetAsEntry();
that.getFileFromEntryRecursively(entry)
}
}
e.preventDefault();
})
})
},
methods: {
getFileFromEntryRecursively(entry) {
if (entry.isFile) {
entry.file(file => {
console.log(file);
let path = entry.fullPath.substring(1);
}, e => { console.log(e); });
} else {
let reader = entry.createReader();
reader.readEntries(entries => {
entries.forEach(entry => this.getFileFromEntryRecursively(entry));
}, e => { console.log(e); });
}
},
onFileChange(file, filelist) {
console.log(file);
console.log(filelist);
}
}
})
</script>
</body>