在Vue.js中使用Element UI的el-upload组件实现递归多文件上传，可以通过设置el-upload的multiple属性来允许选择多个文件，并且可以通过监听on-success事件来实现递归上传。以下是一个简单的示例：
<template>
<el-upload
class="upload-demo"
drag
:multiple="true"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
action="https://jsonplaceholder.typicode.com/posts/"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [], // 存储待上传的文件列表
};
},
methods: {
handleSuccess(response, file, fileList) {
// 移除已上传的文件
this.fileList = this.fileList.filter(item => item !== file);
// 继续上传剩余文件
if (this.fileList.length > 0) {
this.uploadFiles(this.fileList);
}
},
handleBeforeUpload(file) {
// 添加待上传的文件到列表
this.fileList.push(file);
// 如果是文件夹，将文件夹内的文件添加到待上传列表
if (file.type === 'application/x-webkit-file-package-axis') {
file.fileList.forEach(childFile => {
this.fileList.push(childFile);
});
}
// 阻止默认上传行为
return false;
},
uploadFiles(fileList) {
const currentFile = fileList.shift();
const formData = new FormData();
formData.append('file', currentFile.raw); // 或者直接使用currentFile
// 模拟上传文件操作
// axios.post('upload/url', formData).then(response => {
// this.handleSuccess(response.data, currentFile);
// });
// 递归上传剩余文件
if (fileList.length > 0) {
this.uploadFiles(fileList);
}
},
},
};
</script>
在这个示例中，我们定义了fileList来存储待上传的文件。在handleBeforeUpload方法中，我们将文件夹内的所有文件加入到待上传列表中。在handleSuccess方法中，我们移除已上传的文件，并检查是否还有文件待上传，如果有，则递归调用uploadFiles方法继续上传。
注意：示例中的action是一个模拟的URL，你需要替换为实际的文件上传API。实际上，你可能需要使用axios或其他HTTP库来完成真正的上传操作。