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

Myth丶恋晨 2024-04-24 21:00 90阅读 0赞

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

###### 看到上传的需求，首先想到的是elementUI中是否可以使用并达到预期，看了下官方给的文档 Upload 上传，但是都支持上传jpg/png文件，无法选中文件夹上传所以无法获取文件夹的上传路径以及相关信息 ######

![image][]  
![image][image 1]

###### 代码实现可上传文件夹并获取路径 ######

<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
        },
    }

[image]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/a3a8f165c5b94df7a067e21e7914a060.png
[image 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/b168087138794a62b588a8f929b4311a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，90人围观）

还没有评论，来说两句吧...

相关阅读

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

【代码】ElementUI中el-upload上传修改支持上传文件夹。

Myth丶恋晨/ 2024年04月24日 21:00/ 0 赞/ 91 阅读

相关 SpringBoot上传文件夹

Spring Boot提供了多种上传文件的方式，可以通过MultipartFile接收单个文件，也可以通过MultipartHttpServletRequest接收多个文件。但

迈不过友情╰/ 2024年03月22日 09:04/ 0 赞/ 48 阅读

相关 java上传文件(java上传文件夹)

Java如何删除文件？ private void deleteFiles(List fileList, String path) \{ for (int index =

叁歲伎倆/ 2023年09月25日 08:47/ 0 赞/ 21 阅读

相关 linux下上传文件夹,linux下上传下载文件夹的方法

Linux下目录复制：本机->远程服务器 scp -r /home/shaoxiaohu/test1 zhidao@192.168.0.1:/home/test2 test

浅浅的花香味﹌/ 2023年01月19日 10:52/ 0 赞/ 17 阅读

相关 ElementUI 上传文件以及限制

一、概述现有项目中，涉及文件上传。要求： 1. 文件必须是excel 2. 只能上传1个文件 3. 文件大小不能超过5M 二、Upload 上传注意：

小鱼儿/ 2022年10月27日 15:59/ 0 赞/ 898 阅读

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

vue使用el-upload上传文件夹功能描述：页面中有一个导入按钮，点击导入按钮出现导入图片弹框（此处是正常使用el-upload），弹框分为两部分，左侧部分是正常

一时失言乱红尘/ 2022年09月02日 11:54/ 0 赞/ 1652 阅读

相关 SpringBoot文件夹上传

摘要本文将总结SpringBoot环境搭建，以及SpringMVC结合html5实现web上传文件夹，注意是整个文件夹所有文件的上传。 SpringBoot环境搭建

末蓝、/ 2022年05月26日 05:35/ 0 赞/ 230 阅读

相关 git上传文件夹命令

git pull --rebase origin master git pull origin master git add . git commit -m 'fi

川长思鸟来/ 2022年05月24日 23:47/ 0 赞/ 267 阅读

相关 github上传文件夹

[GitHub把自己整个文件夹上传][GitHub] 我已经有了自己[github][]，但是我怎么对我的项目进行上传呢，普通的上传只有上传单一的文件这不我去下载了G

落日映苍穹つ/ 2022年05月17日 03:10/ 0 赞/ 309 阅读

相关 ElementUI图片上传

本例采用图片数据存储到数据库字段的方式上传文件实体类 package com.test.model; import java.io.Seri

心已赠人/ 2021年10月24日 03:38/ 0 赞/ 460 阅读