elementUI的el-upload上传文件夹 vue+elementUI

vue使用el-upload上传文件夹

功能描述: 页面中有一个导入按钮,点击导入按钮出现导入图片弹框(此处是正常使用el-upload),弹框分为两部分,左侧部分是正常的导入图片,右侧是支持上传文件夹格式
效果图:
elementUI的el-upload上传文件夹 vue+elementUI_第1张图片
功能实现:

this.$nextTick(() => {
        this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
        console.log(this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory)
      })

功能讲解: 首先找到你点击出现弹框的事件,我这里是点击导入时出现的弹框,我就在导入的点击事件中写,然后获取到el-upload标签的ref=“uploadFile”,获取到之后将上面的代码复制上去,把它的webkitdirectory = true就可以了。(如果你的ref不是uploadFile,那记得把上面代码中的uploadFile换成你自己的ref)

啾咪~

你可能感兴趣的:(vue,element上传文件夹,vue,elementui)