ElementUI中el-upload上传修改支持上传文件夹
需求:上传某文件夹并获取文件夹的本地路径
看到上传的需求,首先想到的是elementUI中是否可以使用并达到预期,看了下官方给的文档 Upload 上传,但是都支持上传jpg/png文件,无法选中文件夹上传所以无法获取文件夹的上传路径以及相关信息
代码实现可上传文件夹并获取路径
<el-upload
ref="uploadFile"
:show-file-list="false"
:before-upload="beforeUpload"
action="/">
<el-button :disabled="type==='edit'" class="add-button" type="primary" size="small" @click="handleAddFolder">添加</el-button>
</el-upload>
methods: {
// 点击文件夹路径上传按钮
handleAddFolder () {
this.$nextTick(() => {
this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
})
},
// 文件夹路径上传之前钩子函数
beforeUpload (file) {
// file.path为文件夹的路径
this.form.Folder = file.path
},
}