【Java 中级】一文精通 Spring MVC - 上传（十）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Java 中级】一文精通 Spring MVC - 上传（十）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【Java 中级】一文精通 Spring MVC - 上传（十）,Java 中级,java,spring,mvc

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

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

1. 什么是 MultipartResolver

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

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

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

CommonsMultipartResolver：基于 Apache Commons FileUpload 库实现的 MultipartResolver。需要在项目中添加 commons-fileupload 依赖。
StandardServletMultipartResolver：基于 Servlet 3.0+ 的标准 API 实现的 MultipartResolver。不需要额外的依赖，适用于运行在 Servlet 3.0+ 容器中的项目。
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项目为背景，实现单文件上传可以按照以下步骤进行：

配置MultipartResolver：
在Spring Boot中，MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置：

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

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

创建文件上传接口：
在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 类型来表示上传的文件。可以根据实际需求进行文件存储或其他操作。

创建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项目背景下，实现多文件上传可以按照以下步骤进行：

配置MultipartResolver：
在Spring Boot中，MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置：

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

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

创建文件上传接口：
在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[] 类型来表示上传的多个文件。可以根据实际需求进行文件存储或其他操作。

创建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项目背景下实现多文件多线程上传可以按照以下步骤进行：

配置MultipartResolver：
在Spring Boot中，MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置：

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

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

创建文件上传接口：
在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 ），并使用多线程来处理文件上传操作。可以根据实际需求进行文件存储或其他操作。

创建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项目背景下实现大文件分段上传可以按照以下步骤进行：

配置MultipartResolver：
在Spring Boot中，MultipartResolver的配置可以通过application.properties或application.yml文件进行。在application.yml文件中添加以下配置：

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

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

创建文件上传接口：
在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 注解来接收文件参数、分片序号和总分片数。可以根据实际需求进行文件存储或其他操作。在最后一个分片上传完成后，可以进行文件合并操作。

创建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>