ElementUI中el-upload上传修改支持上传文件夹

zhangzuying1026

已于 2023-10-20 16:11:29 修改

阅读量4.9k

点赞数

文章标签： elementui vue.js javascript

于 2023-02-07 08:50:30 首次发布

zhangzuying

本文链接：https://blog.youkuaiyun.com/weixin_48138187/article/details/128911537

版权

文章讲述了在使用elementUI时遇到的上传文件夹需求，指出elementUI的Upload组件默认只支持单个文件上传，不支持文件夹。通过设置`webkitdirectory`属性，实现了文件夹选择并获取其本地路径的功能。在`beforeUpload`钩子中，可以访问到文件夹的路径并存储。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：上传某文件夹并获取文件夹的本地路径

看到上传的需求，首先想到的是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
    },
}