ElementUI中el-upload上传修改支持上传文件夹

需求:上传某文件夹并获取文件夹的本地路径
看到上传的需求,首先想到的是elementUI中是否可以使用并达到预期,看了下官方给的文档 Upload 上传,但是都支持上传jpg/png文件,无法选中文件夹上传所以无法获取文件夹的上传路径以及相关信息

image
image

代码实现可上传文件夹并获取路径
<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
},
}
posted @   zhangzuying  阅读(4641)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示