欢迎光临散文网 会员登陆 & 注册

怪奇笔记:Vue3中element-plus/upload开启文件夹上传模式

2022-08-22 15:40 作者:巨型蟹敌  | 我要投稿

想不到吧,这element-plus的upload想开启文件夹上传不如vue2时候的便利了,但是有办法。

如果你是options的vue3写法,好走不送,沿用vue2方案即可

如果你是setup写法,下面的内容可能会帮到你

vue2中利用了refs下查找对应的v-node进行定位元素,并开启webkitdirectory = true进行文件夹模式的上传,那么在vue3中,也是一样的原理,但下图击穿了装甲

没想到吧,ref里啥都没了,因为没有expose出来

so,最土的方案来了,document.querySelector救我:

补充一下方案图:

reactive区域设置
设置两个trigger,分别对应不同的选择目的地
我是在上传弹窗现实的时候,获取上传的dom
两个func,分别切换不同的选择模式

就这,然后造就行了,如果需要切换文件夹模式和普通选择模式,则需要将这个uploadEle进行响应式,然后直接控即可。

PPS:

  1. 切记打开multiple属性,否则选择了文件夹,还是只能上传单个,极致的可以用动态isMultiple去控。

  2. 有需要可以在temple=trigger地方布置两个按钮,分别操控state映射的dom对象来实时切换webkitdirectory 属性,经测在弹出选择文件之前,此属性可以正确设置好。如不放心,可以采隐藏el-upload,绑定其refs,然后通过ref.handleStart()方法在确保设置完属性后开启窗口


怪奇笔记:Vue3中element-plus/upload开启文件夹上传模式的评论 (共 条)

分享到微博请遵守国家法律