<template>
<el-upload
class="upload-demo"
action="#"
:on-remove="fileRemoveHandle4"
:on-change="fileChangeHandle4"
accept=""
:auto-upload="false"
multiple
:file-list="form.instFilePics"
ref="uploadFile">
<el-button size="small" type="primary" :title="form.instFile.length == 0 || !form.instFile ? '请先上传Md文件' : ''">
<i class="el-icon-folder-opened"></i>
</el-button>
</el-upload>
</template>
<script>
export default {
name: "uploadFile",
data(){
return {
form:{
instFilePics:[],
instFile:[]
}
}
},
mounted() {
this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;
},
methods:{
// 使用说明文档 路径
fileChangeHandle4(file, fileList, name) {
this.form.instFilePics = fileList
},
// 使用说明文档 路径
fileRemoveHandle4(file, fileList, name) {
// if (file.id) {
// this.instFilePics.push(file.id);
// }
this.form.instFilePics = fileList
},
}
}
</script>
<style scoped>
</style>
element ui 上传文件组件,可以选中文件夹并上传文件夹内所有文件
最新推荐文章于 2024-07-05 18:28:09 发布
这个博客展示了如何在Vue.js应用中实现一个文件上传组件,该组件支持选择目录、预览文件、移除文件以及自定义上传行为。在`mounted`钩子中,通过设置`webkitdirectory`属性允许选择目录。`fileChangeHandle4`和`fileRemoveHandle4`方法分别用于处理文件变化和移除操作,更新`form.instFilePics`以维护文件列表状态。
摘要由CSDN通过智能技术生成