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 }, }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」