java实现文件夹上传功能实例代码(SpringBoot框架)

目录
  • 前言
  • 一、前端如何设置上传组件并将资源上传到后台服务
    • 1）首先我们需要新建一个用来提交文件夹的form表单
    • 2）然后我们添加自己框架内的一些按钮来触发该隐藏的表单
  • 二、后台如何接收处理文件夹表单数据
  • 总结

前言

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

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

这里的项目框架为若依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实现文件夹上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • springboot实现文件上传和下载功能

    spring boot 引入"约定大于配置"的概念,实现自动配置,节约了开发人员的开发成本,并且凭借其微服务架构的方式和较少的配置,一出来就占据大片开发人员的芳心.大部分的配置从开发人员可见变成了相对透明了,要想进一步熟悉还需要关注源码. 1.文件上传(前端页面): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo

  • SpringBoot实现文件上传功能

    SpringBoot实现文件上传功能

    经典的文件上传 服务器处理上传文件一般都是先在请求中读取文件信息,然后改变名称保存在服务器的临时路径下,最后保存到服务器磁盘中.本次以thymeleaf搭建demo,因此需要引入thymeleaf依赖库. <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> <versio

  • 详解SpringBoot下文件上传与下载的实现

    SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 / 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") Multipart

  • SpringBoot实现文件上传下载功能小结

    最近做的一个项目涉及到文件上传与下载.前端上传采用百度webUploader插件.有关该插件的使用方法还在研究中,日后整理再记录.本文主要介绍SpringBoot后台对文件上传与下载的处理. 单文件上传 // 单文件上传 @RequestMapping(value = "/upload") @ResponseBody public String upload(@RequestParam("file") MultipartFile file) { try { if (

  • Spring Boot实现文件上传示例代码

    Spring Boot实现文件上传示例代码

    使用SpringBoot进行文件上传的方法和SpringMVC差不多,本文单独新建一个最简单的DEMO来说明一下. 主要步骤包括: 1.创建一个springboot项目工程,本例名称(demo-uploadfile). 2.配置 pom.xml 依赖. 3.创建和编写文件上传的 Controller(包含单文件上传和多文件上传). 4.创建和编写文件上传的 HTML 测试页面. 5.文件上传相关限制的配置(可选). 6.运行测试. 项目工程截图如下: 文件代码: <dependencies>

  • 详解SpringBoot文件上传下载和多文件上传（图文）

    详解SpringBoot文件上传下载和多文件上传（图文）

    最近在学习SpringBoot,以下是最近学习整理的实现文件上传下载的Java代码: 1.开发环境: IDEA15+ Maven+JDK1.8 2.新建一个maven工程: 3.工程框架 4.pom.xml文件依赖项 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation

  • java实现文件夹上传功能实例代码(SpringBoot框架)

    目录 前言 一.前端如何设置上传组件并将资源上传到后台服务 1)首先我们需要新建一个用来提交文件夹的form表单 2)然后我们添加自己框架内的一些按钮来触发该隐藏的表单 二.后台如何接收处理文件夹表单数据 总结 前言 有时我们后台管理等服务可能会有这样一个简单需求,就是根据文件夹将整个文件夹下的所有资源都上传到我们的服务器上,本人也是搜索了大量资料,最终以最简单便捷的方式实现该功能,具体操作步骤如下 一.前端如何设置上传组件并将资源上传到后台服务 这里的项目框架为若依VUE版本,下面将核心的代码

  • Java与WebUploader相结合实现文件上传功能(实例代码)

    之前自己写小项目的时候也碰到过文件上传的问题,没有找到很好的解决方案.虽然之前网找各种解决方案的时候也看到过WebUploader,但没有进一步深究.这次稍微深入了解了些,这里也做个小结. 简单的文件和普通数据上传并保存 jsp页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE h

  • PHP实现文件上传功能实例代码

    PHP实现文件上传功能实例代码

    点击浏览,将所选的文件上传到创建的images文件夹内 代码如下: 1.wenjian.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

    注意: 1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性; enctype="multipart/form-data" 2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置! <!-- 上传拦截,如最大上传值及最小上传值 --> <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制 <bean id="multipartRes

  • thinkjs 文件上传功能实例代码

    thinkjs 文件上传功能实例代码

    介绍 ThinkJS 是一款面向未来开发的 Node.js 框架,整合了大量的项目最佳实践,让企业级开发变得如此简单.高效.从 3.0 开始,框架底层基于 Koa 2.x 实现,兼容 Koa 的所有功能. 特性 基于 Koa 2.x,兼容 middleware 内核小巧,支持 Extend.Adapter 等插件方式 性能优异,单元测试覆盖程度高 内置自动编译.自动更新机制,方便快速开发 使用更优雅的 async/await 处理异步问题,不再支持 */yield 从 3.2 开始支持 Type

  • jquery ajax实现文件上传功能实例代码

    下面看下ajax实现文件上传   没有使用插件 一.单文件上传 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <title></

  • Android 实现文件夹排序功能的实例代码

    按文件名排序 /** * 按文件名排序 * @param filePath */ public static ArrayList<String> orderByName(String filePath) { ArrayList<String> FileNameList = new ArrayList<String>(); File file = new File(filePath); File[] files = file.listFiles(); List fileL

  • Node.js 文件夹目录结构创建实例代码

    第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法: fs.exists(path, callback); fs.mkdir(path, [mode], callback); 实现文件夹目录结构的创建代码实现如下: //创建文件夹 function mkdir(pos, dirArray,_callback){ var len = dirArray.length; con

  • Python FTP两个文件夹间的同步实例代码

    具体代码如下所示: # -*- coding: utf-8 -*- ''''''' ftp自动检测源文件夹的更新,将源文件夹更新的内容拷贝到目标文件夹中 使用树的层序遍历算法,支持深度目录拷贝 ''' import os from ftplib import FTP import os,sys,string,datetime,time import shutil import socket class MyUpdateMonitor(object): def __init__(self, hos

  • PHP大文件切割上传功能实例分析

    本文实例讲述了PHP大文件切割上传功能.分享给大家供大家参考,具体如下: 大家都知道php上传文件有限制,如果没有修改过php.ini文件的话,默认的上传大小限制为2M,那么该如何上传大文件了,比如说上传一个1G多的大文件,可以使用大文件切割上传的方式来解决. 何为大文件切割上传? 原理:利用HTML5的新特性,将文件内容切割成分段的二进制信息,然后每次向服务器上传一段,而服务器,只需要把我们每次上传的二进制信息整合存储到一个文件中,那么最后这个文件就是所上传的文件. 由于php.ini默认的上

随机推荐