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 @ 2022-06-08 14:13  zhangzuying  阅读(4396)  评论(0编辑  收藏  举报