怪奇笔记:Vue3中element-plus/upload开启文件夹上传模式
想不到吧,这element-plus的upload想开启文件夹上传不如vue2时候的便利了,但是有办法。
如果你是options的vue3写法,好走不送,沿用vue2方案即可
如果你是setup写法,下面的内容可能会帮到你
vue2中利用了refs下查找对应的v-node进行定位元素,并开启webkitdirectory = true进行文件夹模式的上传,那么在vue3中,也是一样的原理,但下图击穿了装甲

so,最土的方案来了,document.querySelector救我:
补充一下方案图:




就这,然后造就行了,如果需要切换文件夹模式和普通选择模式,则需要将这个uploadEle进行响应式,然后直接控即可。
PPS:
切记打开multiple属性,否则选择了文件夹,还是只能上传单个,极致的可以用动态isMultiple去控。
有需要可以在temple=trigger地方布置两个按钮,分别操控state映射的dom对象来实时切换webkitdirectory 属性,经测在弹出选择文件之前,此属性可以正确设置好。如不放心,可以采隐藏el-upload,绑定其refs,然后通过ref.handleStart()方法在确保设置完属性后开启窗口

