有时我们后台管理等服务可能会有这样一个简单需求,就是根据文件夹将整个文件夹下的所有资源都上传到我们的服务器上,本人也是搜索了大量资料,最终以最简单便捷的方式实现该功能,具体操作步骤如下

一、前端如何设置上传组件并将资源上传到后台服务

这里的项目框架为若依VUE版本,下面将核心的代码抽离出来进行代码示例,方便大家快速阅读

1)首先我们需要新建一个用来提交文件夹的form表单

1.添加一个 type=file 的 input 提交组件,添加 webkitdirectory 标识来使用文件夹上传功能

2.添加 @change="uploadSoundCodeFolder" 事件,当我们上传了文件夹后将触发 uploadSoundCodeFolder() 函数来处理上传逻辑

<form id="uploadSoundCodeFolderForm"
style="display: none" method="post"
enctype="multipart/form-data">
<input id="fileFolder" name="fileFolder" type="file"
@change="uploadSoundCodeFolder" webkitdirectory>
</form>

uploadSoundCodeFolder() 实现逻辑如下

uploadSoundCodeFolder(e){
this.uploadSoundCodeLoading = true;
//获取到选中的文件夹内的所有文件
//files 为一个集合
//可通过遍历 files 的方式获取到每个文件的大小等数据,来实现大小限制等需求
let files = e.target.files; //中间省略大小限制等需求...... //获取表单数据
let formData = new FormData(document.getElementById("uploadSoundCodeFolderForm")); //调用后台服务方法来提交该表单数据
uploadSoundCode(formData).then((res)=>{
_this.$message.success("上传成功")
//上传成功后清空表单数据
$("#fileFolder").val('');
})
}

2)然后我们添加自己框架内的一些按钮来触发该隐藏的表单

这样做的好处是使用了form文件夹上传的功能,却不用使用他的UI

<!-- 首先创建一个按钮用来触发上传事件 uploadSoundCodeBtn() -->
<el-button v-loading="uploadSoundCodeLoading"
@click="uploadSoundCodeBtn">
上传文件夹
</el-button>
/*上传事件触发的方法*/
uploadSoundCodeBtn(){
$("#fileFolder").click();
},

二、后台如何接收处理文件夹表单数据

这里我们使用 List fileFolde 类型来接受前端发来的文件集合,fileFolde为表单里面的 name

@RequestMapping(value="/uploadSoundCode",method= RequestMethod.POST)
public AjaxResult uploadSoundCode(List<MultipartFile> fileFolde) throws IOException {
String soundCodeUrl = HereUtil.uploadSoundCode(fileFolder);
return AjaxResult.success(soundCodeUrl);
}

然后根据业务将文件保存到服务器就行了

public static String uploadSoundCode(List<MultipartFile> files) throws IOException {

        for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
if (StrUtil.isBlank(fileName)){
continue;
} //上传后的URL全路径
String fullFilePath = "上传的跟路径" + fileName;
FileUtil.writeFromStream(file.getInputStream(), fullFilePath);
} return "";
}

java 实现文件夹上传(springBoot 框架)的更多相关文章

  1. java+http文件夹上传

    在web项目中上传文件夹现在已经成为了一个主流的需求.在OA,或者企业ERP系统中都有类似的需求.上传文件夹并且保留层级结构能够对用户行成很好的引导,用户使用起来也更方便.能够提供更高级的应用支撑. ...

  2. java实现文件夹上传

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...

  3. Java多级文件夹上传

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  4. Java Web 项目的文件/文件夹上传下载

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  5. java web 实现文件夹上传(保留目录结构)

    今天我弄了一下文件夹上传(很简单的 首先,我们的html需要这样写 <form action="/file/upload" enctype="multipart/f ...

  6. java文件夹上传下载组件

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  7. 文件夹上传插件webupload插件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  8. 文件夹上传控件webupload插件

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  9. Web 项目的文件/文件夹上传下载

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  10. webuploader+文件夹上传

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

随机推荐

  1. macOS开发应用Sign(签名)和Notarizaiton(公证)

    签名 可执行文件签名: codesign -f -s ${证书ID} --timestamp ${签名文件} .Pkg安装文件签名: productsign --timestamp --sign ${ ...

  2. 20200923--计算鞍点(奥赛一本通P91 4)

    给定一个5*5的矩阵,每行只有一个最大值,每列只有一个最小值,寻找这个矩阵的鞍点.鞍点指的是矩阵中的一个元素,它是所在行的最大值,并且是所在列的最小值. 例如:在下面的例子中(第4行第1列的元素就是鞍 ...

  3. ucharts的区域图、折线图(有x轴的),修改x轴显示为隔一个显示

    1.原本的显示方式: 2.想要的效果: 3.这边我使用的是uchart的组件,在uni_modules > qiun-data-charts > js_sdk > u-charts, ...

  4. Element UI 父组件el-tabel选择某行跳转子组件,在子组件的el-table中选择数组,添加到父组件操作行中

    解决思路: 1.在父组件选择操作某行数据时,将父组件的行号暂存(index). 2.跳转子组件页面,选择某行数据,点击提交将该行数据传递个父组件 3.父组件取到第一步暂存行号(index),将子组件传 ...

  5. 创建sqlSession对象操作数据库

    1.加载核心配置文件 //加载mybatis核心配置文件,获取SqlSessionFactory String resource = "mybatis-config.xml"; I ...

  6. go tour 笔记 day1

    go get 访问github太慢需要配置代理,设置环境变量 http_proxy=http://127.0.0.1:xxxx 算是比较方便的一种 ref: https://blog.csdn.net ...

  7. api进阶Day3使用文件流对文件进行复制、使用块读写一组字节,使用byte数组提高读写的效率、返回当前时间。

    使用文件流对文件进行复制: package io; import java.io.FileInputStream; import java.io.FileNotFoundException; impo ...

  8. 位置式PID和增量式PID

    PID介绍 PID 是 Proportional(比例).Integral(积分).Differential(微分)的首字母缩写:是一种结合比例.积分和微分三种环节于一体的闭环控制算法.PID 控制的 ...

  9. SDN实验1

    (一)基本要求 使用Mininet可视化工具,生成下图所示的拓扑,并保存拓扑文件名为学号.py. 使用Mininet的命令行生成如下拓扑: a) 3台交换机,每个交换机连接1台主机,3台交换机连接成一 ...

  10. 12、jmeter逻辑控制器-临界区控制器

    临界区:说白了就是不并发了 一个个的像独木桥 使用场景:比如提交一个数据  需要一个一个的提交  一个个的改   在数据库改操作的时候 需要用到 临界区控制器 案例:临界区控制器