【Java 中级】一文精通 Spring MVC - 上传(十)

news2024/11/23 20:15:39

在这里插入图片描述

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主

⛪️ 个人社区:个人社区
💞 个人主页:个人主页
🙉 专栏地址: ✅ Java 高阶
🙉八股文专题:剑指大厂,手撕 Java 八股文

文章目录

      • 1. 什么是 MultipartResolver
      • 2. 实现单文件上传
      • 3. 实现多文件上传
      • 4. 多文件多线程上传
      • 5. 大文件分段上传

1. 什么是 MultipartResolver

MultipartResolver 是 Spring 框架提供的一个接口,用于处理 HTTP 请求中的多部分(multipart)数据,通常用于上传文件等场景。

当客户端发送包含文件上传或其他二进制数据的请求时,请求的内容类型为 multipart/form-data。MultipartResolver 的作用就是解析这种类型的请求,提取其中的各个部分数据。

Spring 框架提供了多种 MultipartResolver 的实现,常用的有以下几种:

  1. CommonsMultipartResolver:基于 Apache Commons FileUpload 库实现的 MultipartResolver。需要在项目中添加 commons-fileupload 依赖。
  2. StandardServletMultipartResolver:基于 Servlet 3.0+ 的标准 API 实现的 MultipartResolver。不需要额外的依赖,适用于运行在 Servlet 3.0+ 容器中的项目。
  3. CosMultipartResolver:基于 COS(Chinese Open Source)库实现的 MultipartResolver。需要在项目中添加 cos.jar 依赖。

使用 MultipartResolver 需要在 Spring 配置文件中进行相应的配置。例如,在使用 CommonsMultipartResolver 的情况下,可以进行如下配置:

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <!-- 设置上传文件的最大大小 -->
    <property name="maxUploadSize" value="5242880" />
</bean>

yml 配置如下:

spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

在配置中,我们可以设置最大上传文件大小等参数。

一旦配置完成,Spring MVC 将会自动使用 MultipartResolver 来解析 multipart 请求,并将上传的文件或其他数据绑定到相应的方法参数中。

2. 实现单文件上传

我们以Spring Boot和Vue项目为背景,实现单文件上传可以按照以下步骤进行:

  1. 配置MultipartResolver:
    在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

上述配置将设置最大上传文件大小为5MB。

  1. 创建文件上传接口:
    在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        // 检查上传的文件是否为空
        if (file.isEmpty()) {
            // 处理文件为空的情况
        }

        try {
            // 获取上传文件的字节数据
            byte[] bytes = file.getBytes();
            // 执行文件存储或其他操作
            // ...
            return "上传成功";
        } catch (IOException e) {
            // 处理文件读取错误的情况
        }

        return "上传失败";
    }
}

uploadFile 方法使用 @RequestParam 注解来接收名为 file 的文件参数,并使用 MultipartFile 类型来表示上传的文件。可以根据实际需求进行文件存储或其他操作。

  1. 创建Vue页面进行文件上传:
    在Vue项目中,可以使用 <input type="file"> 标签来创建文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      let formData = new FormData();
      formData.append('file', this.file);

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
          // 处理上传成功的响应
        })
        .catch(error => {
          console.error(error);
          // 处理上传失败的响应
        });
    }
  }
};
</script>

通过 <input type="file"> 标签和 @change 事件来监听文件选择,并将选择的文件保存在Vue组件的data中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload 接口。

3. 实现多文件上传

以Spring Boot和Vue项目背景下,实现多文件上传可以按照以下步骤进行:

  1. 配置MultipartResolver:
    在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

上述配置将设置最大上传文件大小为5MB。

  1. 创建文件上传接口:
    在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFiles(@RequestParam("files") MultipartFile[] files) {
        // 检查上传的文件是否为空
        if (files == null || files.length == 0) {
            // 处理文件为空的情况
        }

        for (MultipartFile file : files) {
            try {
                // 获取上传文件的字节数据
                byte[] bytes = file.getBytes();
                // 执行文件存储或其他操作
                // ...
            } catch (IOException e) {
                // 处理文件读取错误的情况
            }
        }

        return "上传成功";
    }
}

uploadFiles 方法使用 @RequestParam 注解来接收名为 files 的文件数组参数,并使用 MultipartFile[] 类型来表示上传的多个文件。可以根据实际需求进行文件存储或其他操作。

  1. 创建Vue页面进行多文件上传:
    在Vue项目中,可以使用 <input type="file" multiple> 标签来创建多文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
  <div>
    <input type="file" multiple @change="handleFileUpload">
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files);
    },
    uploadFiles() {
      let formData = new FormData();
      this.files.forEach(file => {
        formData.append('files', file);
      });

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
          // 处理上传成功的响应
        })
        .catch(error => {
          console.error(error);
          // 处理上传失败的响应
        });
    }
  }
};
</script>

通过 <input type="file" multiple> 标签和 @change 事件来监听文件选择,并将选择的文件保存在Vue组件的data中的一个数组中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload 接口。

4. 多文件多线程上传

在Spring Boot和Vue项目背景下实现多文件多线程上传可以按照以下步骤进行:

  1. 配置MultipartResolver:
    在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

上述配置将设置最大上传文件大小为5MB。

  1. 创建文件上传接口:
    在Spring Boot的Controller中创建一个接口来处理文件上传请求。
@RestController
public class FileUploadController {
	public static final ExecutorService EXECUTOR_SERVICE= Executors.newFixedThreadPool(Runtime.getRuntime().availableProcessors());
	
    @PostMapping("/upload")
    public String uploadFiles(@RequestParam("files") MultipartFile[] files) {
        // 检查上传的文件是否为空
        if (files == null || files.length == 0) {
            // 处理文件为空的情况
        }

        // 使用多线程进行文件上传
        for (MultipartFile file : files) {
            EXECUTOR_SERVICE.execute(() -> {
                try {
                    // 获取上传文件的字节数据
                    byte[] bytes = file.getBytes();
                    // 执行文件存储或其他操作
                    // ...
                } catch (IOException e) {
                    // 处理文件读取错误的情况
                }
            });
        }

        return "上传成功";
    }
}

uploadFiles 方法使用 @RequestParam 注解来接收名为 files 的文件数组参数,并使用 MultipartFile[] 类型来表示上传的多个文件。在方法内部,我们创建了一个线程池(使用 Executors.newFixedThreadPool ),并使用多线程来处理文件上传操作。可以根据实际需求进行文件存储或其他操作。

  1. 创建Vue页面进行多文件上传:
    在Vue项目中,可以使用 <input type="file" multiple> 标签来创建多文件上传的表单。在表单提交时,使用axios或其他HTTP库将文件发送到后端接口。
<template>
  <div>
    <input type="file" multiple @change="handleFileUpload">
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFileUpload(event) {
      this.files = Array.from(event.target.files);
    },
    uploadFiles() {
      let formData = new FormData();
      this.files.forEach(file => {
        formData.append('files', file);
      });

      axios.post('/upload', formData)
        .then(response => {
          console.log(response.data);
          // 处理上传成功的响应
        })
        .catch(error => {
          console.error(error);
          // 处理上传失败的响应
        });
    }
  }
};
</script>

上述示例中,通过 <input type="file" multiple> 标签和 @change 事件来监听文件选择,并将选择的文件保存在Vue组件的data中的一个数组中。在点击"上传"按钮时,使用axios库将文件发送到后端的 /upload 接口。

5. 大文件分段上传

在Spring Boot和Vue项目背景下实现大文件分段上传可以按照以下步骤进行:

  1. 配置MultipartResolver:
    在Spring Boot中,MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置:
spring:
  servlet:
    multipart:
      max-file-size: 5MB
      max-request-size: 5MB

上述配置将设置最大上传文件大小为5MB。

  1. 创建文件上传接口:
    在Spring Boot的Controller中创建一个接口来处理文件分段上传请求。
@RestController
public class FileUploadController {
    @PostMapping("/upload")
    public String uploadFile(@RequestParam("file") MultipartFile file,
                             @RequestParam("chunkNumber") int chunkNumber,
                             @RequestParam("totalChunks") int totalChunks) {
        // 检查上传的文件是否为空
        if (file.isEmpty()) {
            // 处理文件为空的情况
        }

        try {
            // 获取上传文件的字节数据
            byte[] bytes = file.getBytes();
            
            // 执行文件存储或其他操作
            // ...
            
            // 判断是否为最后一个分片
            if (chunkNumber == totalChunks) {
                // 所有分片上传完成,进行合并操作
                // ...
            }

            return "上传成功";
        } catch (IOException e) {
            // 处理文件读取错误的情况
        }

        return "上传失败";
    }
}

uploadFile 方法使用 @RequestParam 注解来接收文件参数、分片序号和总分片数。可以根据实际需求进行文件存储或其他操作。在最后一个分片上传完成后,可以进行文件合并操作。

  1. 创建Vue页面进行大文件分段上传:
    在Vue项目中,可以使用 <input type="file"> 标签来创建文件选择的表单。在选择文件后,使用axios或其他HTTP库将文件分段发送到后端接口。
<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      let chunkSize = 1024 * 1024; // 每个分片的大小,这里设置为1MB
      let totalChunks = Math.ceil(this.file.size / chunkSize); // 总分片数
      let start = 0;

      for (let chunkNumber = 1; chunkNumber <= totalChunks; chunkNumber++) {
        let end = Math.min(start + chunkSize, this.file.size);
        let chunk = this.file.slice(start, end);

        let formData = new FormData();
        formData.append('file', chunk);
        formData.append('chunkNumber', chunkNumber);
        formData.append('totalChunks', totalChunks);

        axios.post('/upload', formData)
          .then(response => {
            console.log(response.data);
            // 处理上传成功的响应
          })
          .catch(error => {
            console.error(error);
            // 处理上传失败的响应
          });

        start += chunkSize;
      }
    }
  }
};
</script>

我们将文件分成多个分片进行上传。在每个分片上传时,我们使用axios库将分片数据和相关参数发送到后端的 /upload 接口。

精彩专栏推荐订阅:在下方专栏👇🏻
✅ 2023年华为OD机试真题(A卷&B卷)+ 面试指导
✅ 精选100套 Java 项目案例
✅ 面试需要避开的坑(活动)
✅ 你找不到的核心代码
✅ 带你手撕 Spring
✅ Java 初阶

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/939981.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

LeetCode第11~15题解

CONTENTS LeetCode 11. 盛最多水的容器&#xff08;中等&#xff09;LeetCode 12. 整数转罗马数字&#xff08;中等&#xff09;LeetCode 13. 罗马数字转整数&#xff08;简单&#xff09; LeetCode 11. 盛最多水的容器&#xff08;中等&#xff09; 【题目描述】 给定一个长…

广州华锐互动:VR垃圾分类虚拟科普系统让学习过程更加丰富有趣

在我们的日常生活中&#xff0c;垃圾分类已成为一项重要的公民责任。然而&#xff0c;由于缺乏对垃圾分类的深入理解和相关知识&#xff0c;许多人在实践中往往感到困惑和挫败。为了解决这个问题&#xff0c;一种创新的解决方案应运而生&#xff1a;垃圾分类VR虚拟仿真教学系统…

ESP32使用Arduino读写SD卡

背景 esp32屏幕包含一个sd卡接口&#xff0c;通过SPI线连接&#xff0c;需要对插入改SD接口中的TF卡进行读写&#xff0c;通过arduino平台实现。 代码中HSPI指ESP32的SPI2; 在Master模式下&#xff0c;SPID是MOSI/data out, SPIQ是MISO/data in&#xff1a; 代码 #include…

【C语言】指针 和 数组 笔试题详解

目录 一、数组 1.一维数组 2.字符数组 3.二维数组 二、指针 笔试题1 笔试题2 笔试题3 笔试题4 笔试题5 笔试题6 笔试题7 笔试题8&#xff08;有难度&#xff09;【看明白会有质的收获】 在这里我们需要先了解数组名的意义 sizeof(数组名) &#xff0c;这里的数组名表示…

7年经验之谈 —— 如何高效的开展app的性能测试

APP性能测试是什么 从网上查了一下&#xff0c;貌似也没什么特别的定义&#xff0c;我这边根据自己的经验给出一个自己的定义&#xff0c;如有巧合纯属雷同。 客户端性能测试就是&#xff0c;从业务和用户的角度出发&#xff0c;设计合理且有效的性能测试场景&#xff0c;制定…

代码随想录Day_48打卡

①、打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房…

Yolov1原理详细解读及实战(一)理论篇

什么是Yolov1? Yolo(You Only Look Once)是一种one-stage目标检测算法&#xff0c;即仅需要 “看” 一次就可以识别出图片中物体的class类别和位置。作为one-stage的开山鼻祖&#xff0c;YOLOv1以其简洁的网络结构和GPU上的实时检测速度而一鸣惊人&#xff0c;打破了R-CNN的“…

Linux centos7 bash编程(break和continue)

在学习shell知识时&#xff0c;简单编程要从格式入手。 首先学习好单行注释和多行注释。 先学习简单整数的打印输出&#xff0c;主要学习echo命令&#xff0c;学习选项-e -n的使用。 下面的练习是常用的两个分支程序&#xff1a;break和continue。 #!/bin/bash # 这是单行注…

极氪汽车的云资源治理细探

作者&#xff1a;极氪汽车吴超 前言 2021 年&#xff0c;极氪 001 迅速崭露头角&#xff0c;仅用 110 天便创下了首款车型交付量“最快破万”的纪录。2022 年 11 月&#xff0c;极氪 009 在短短 76 天内便率先完成了首批交付&#xff0c;刷新了中国豪华纯电品牌交付速度的纪录…

算法通过村第四关-栈白银笔记|括号问题

文章目录 前言1. 括号匹配问题2. 最小栈问题3. 最大栈 总结 前言 提示&#xff1a;如果让我送给年轻人四个字&#xff0c;就是&#xff1a;量力而行。 量力而行不会失眠&#xff0c;不会啃老&#xff0c;不会为各种考试焦虑。顺其自然活得轻松。其实&#xff0c;量力而行最易大…

数据库集群的简单了解

Update 关于操作的日志 1.0 redo log 读一次写一次 一共2次, 不安全 注意redo log是顺写 而file是随机 所以Mysql做出类似HDFS的操作 行为日志和数据分离&#xff0c;但是不同的是&#xff0c;Mysql在内存中操作修改&#xff0c;如果不出事故&#xff0c;由内存中的行为来直接…

Yolov1原理详细解读及实战(二)实战篇

在Yolov1原理详细解读及实战&#xff08;一&#xff09;理论篇 中&#xff0c;我们对Yolov1网络结构、算法流程、训练及推理原理进行了详细剖析&#xff0c;本章进入实战环节&#xff0c;话不多说&#xff0c;马上开始&#xff01; 环境 vscodeWSL:Ubuntu 18.04python 3.9.7 …

wireshark过滤器的使用

目录 wiresharkwireshark的基本使用wireshark过滤器的区别 抓包案例 wireshark wireshark的基本使用 抓包采用 wireshark&#xff0c;提取特征时&#xff0c;要对 session 进行过滤&#xff0c;找到关键的stream&#xff0c;这里总结了 wireshark 过滤的基本语法&#xff0c;…

外卖订餐系统源码:数字化时代餐饮服务的创新之道

在如今快节奏的生活中&#xff0c;外卖订餐系统源码正成为餐饮业界的一股创新浪潮。它为餐厅和创业者提供了一个数字化的平台&#xff0c;使订餐与配送更加便捷、高效。本文将为您展示如何使用外卖订餐系统源码创建一个简单但功能强大的订餐平台。 # 导入必要的模块 import d…

离线竞价功能说明及设置

为了更加方便广大用户不再熬夜竞价&#xff0c;西部数码推出了离线竞价功能&#xff0c;现已正式上线&#xff0c;欢迎大家使用反馈。 1、离线竟价功能说明 当您拥有域名的出价权限时&#xff0c;您可在 【我参与的竞价】或【我出价的域名】列表选中域名开启离线竟价。 设置…

固定资产管理系统都需要考虑哪些问题?

企业管理中固定资产的追踪和管理是非常重要的一环。固定资产不仅包括房屋、土地、机器设备等大量的资产&#xff0c;也包括低值易耗品。因为这些资产往往是企业生产或者管理过程中不可或缺的。在使用和管理过程中&#xff0c;往往涉及到转移、借调、维护等方面。如何进行有效的…

健康安全的新定义,照明舒适达到巅峰,SUKER书客护眼台灯L1震撼发售

深耕照明领域多年的SUKER书客&#xff0c;这一次给大家带来一份大惊喜。在最近正式发布新品——SUKER书客护眼台灯L1&#xff0c;这款护眼台灯承载着在照明领域的前沿技术&#xff0c;能保证照明安全健康和舒适度并带来非常优秀的护眼效果。作为书客在护眼台灯领域的颠覆式新品…

【FaceChain风格DIY手把手教程】无限场景风格LoRA与固定人物LoRA的融合(4Kstar!)

先看效果 以上风格LoRA分别为&#xff1a;户外花园婚纱、冬季雪景汉服、火焰女神、仙侠风 环境准备 在魔搭平台ModelScope 魔搭社区中选择PAI-DSW-GPU环境 进入后打开terminal环境&#xff0c;先检查显存需要20G左右&#xff08;nvidia-smi&#xff09;&#xff0c;然后下载核…

面试题-React(七):React组件通信

在React开发中&#xff0c;组件通信是一个核心概念&#xff0c;它使得不同组件能够协同工作&#xff0c;实现更复杂的交互和数据传递。常见的组件通信方式&#xff1a;父传子和子传父 一、父传子通信方式 父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用…