MultipartFile上传文件的几种场景

本文深入解析MultipartFile在Spring框架中的作用,涵盖单文件与多文件的表单及AJAX上传方式,提供详尽的前后端代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:

     1:什么是MultipartFile

                 MultipartFile是spring类型,代表HTML中form data方式上传的文件,包含二进制数据+文件名称。

     2:什么是transferTo

                 使用transferTo (本质上还是使用了流 只不过是封装了步骤)
                 会生成文件,最后不需要文件要删除

正文:

          针对文件上传笔者在这里列举了三种情况,前后端主要是java和js

          后端applicationContext.xml配置

          <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

         (注:如果多文件较大,定义CommonsMultipartResolver,不要指定上传的文件大小)

 

一:基于表单的MultipartFile 单文件上传

     前端:jsp

   <form method="post" enctype="multipart/form-data">

            <input type=text class="uploadStoreid" name="id" style="display:none" />

           <input type="file" class="videoWp" accept="video/*" name="videoUpload" />

            </ br>

            <video id="myVideo" autoPlay="true" controls width="400" height="280"></video>

            <br>

            <input type="submit"  onclick="javascript:this.form.action='SpringMVC/UploadingVideo2';" value="上传" />

 

    </form>

 后端java代码

 @RequestMapping(value="uploadFile",method={RequestMethod.POST})

 

 

      public String UploadingVideo2(

      @RequestParam(value = "videoUpload", required = false) MultipartFile file

       ) throws IOException{             

              String MD5File = UUID.randomUUID() + file.getOriginalFilename();// 对文件进行加密处理
              String filePath = request.getSession().getServletContext().getRealPath("WEB-INF/photo");//文件存储路径
              file.transferTo(new File(filePath+ File.separator + MD5File));  //进行写入文件

                       return "redirect:/SpringMVC/videoUploadSuc";           //表单提交结束重定向

        }

 

二:基于ajax的MultipartFile 单文件上传

    前端完整jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><base href="<%=basePath%>"></head>

<body>

     <div id="uploadForm">

          <input id="file" type="file"/>

          <button id="upload" type="button">upload</button>

     </div>

</body>

<script src="inc/jquery-1.8.3.js"></script>

<script type="text/javascript">

(function($){

         $("#upload").on("click", function () {

         var s = $('#file')[0].files[0];

         var formData = new FormData();

         formData.append("file_data", s);

         formData.append("type", "1");

        $.ajax({

              url: "SpringMVC/fileUpload",

              type: 'POST',

              cache: false,

              data: formData,

              processData: false,

              contentType: false,

              success: function (result) {},

              error: function (err) {}

         });

   })

}(jQuery));

</script>

</html>

//注:这里主要传输的是单个对象文件,多对象文件传输可能出现IllegalStateException异常

//1:多个文件内存之和小于3MB,不会出现此异常,因为它太小,Spring将其保存在内存中,

        当我们请求文件时,它会从内存中检索。我们可以多次请求它,因为文件在内存中。

//2:多个文件内存之和大于3MB,报IllegalStateException异常

        Spring将把它保存为一个临时文件,我们不知道它的位置,但是当我们读取输入流之后,

        这个文件可能会被Spring内部删除。然后,当我们要求第二次,错误说“不能再读”。

 

 

后端java代码

@RequestMapping(value = "/fileUpload",method = RequestMethod.POST)

@ResponseBody

public JSONObject fileUpload(

@RequestParam("file_data") MultipartFile file_data, @RequestParam("type") String type){

              String MD5File = UUID.randomUUID() + file.getOriginalFilename();// 对文件进行加密处理
              String filePath = request.getSession().getServletContext().getRealPath("WEB-INF/photo");//文件存储路径
              file.transferTo(new File(filePath+ File.separator + MD5File));  //进行写入文件

}

 

三:基于ajax的MultipartFile 多文件上传

前端完整jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><base href="<%=basePath%>"></head>

<body>

     <div id="uploadForm">

           <input id="file" type="file"/>

           <input id="file1" type="file"/>

           <input id="file2" type="file"/>

           <input id="file3" type="file"/>

           <input id="file4" type="file"/>

          <button id="upload" type="button">upload</button>

     </div>

</body>

<script src="inc/jquery-1.8.3.js"></script>

<script type="text/javascript">

(function($){

         $("#upload").on("click", function () {

               var formData = new FormData();

              if($('#file')[0].files[0]!=null){

                      formData.append('multipartFile1', $('#file')[0].files[0]);

              }

              if($('#file1')[0].files[0]!=null){

                      formData.append('multipartFile1', $('#file1')[0].files[0]);

              }

              if($('#file2')[0].files[0]!=null){

                     formData.append('multipartFile2', $('#file2')[0].files[0]);

              }

              if($('#file3')[0].files[0]!=null){

                      formData.append('multipartFile2', $('#file3')[0].files[0]);

               }

               if($('#file4')[0].files[0]!=null){

                        formData.append('multipartFile2', $('#file4')[0].files[0]);

                }

                formData.append("type", "222");

               $.ajax({

                      url: "SpringMVC/fileUpload",

                      type: 'POST',

                      cache: false,

                      data: formData,

                      processData: false,

                      contentType: false,

                      success: function (result) {},

                      error: function (err) {}

               });

})

}(jQuery));

</script>

</html>

 

//注:1:在js中 formData.append(key,value),相同的key是不会覆盖的,而是作为一个数组

              这里根据传输的文件属于几个类别,定义几个数组,这里定义了multipartFile1、multipartFile2

//         2:在多文件上传时,后端只能以数组进行接收文件,

               要是一个个文件的形式传输到后端,只要有一个空文件,后端则全部数据都无法接收到。

 

java代码

@RequestMapping(value = "fileUpload",method = RequestMethod.POST)

public void filesUpload(

@RequestParam("multipartFile1") MultipartFile[] multipartFile1,

@RequestParam("multipartFile2") MultipartFile[] multipartFile2) {

        for (MultipartFile multipartFile : multipartFile1) {

                   saveFile(multipartFile);

        }

       for (MultipartFile multipartFile : multipartFile2) {

                  saveFile(multipartFile);

        }

}

 

private boolean saveFile(MultipartFile file) {

        // 判断文件是否为空

       if (!file.isEmpty()) {

             try {

                     String MD5File = UUID.randomUUID() + file.getOriginalFilename();// 对文件进行加密处理

                     String filePath = request.getSession().getServletContext().getRealPath("WEB-INF/photo");

                     file.transferTo(new File(filePath+ File.separator + MD5File));

                     return true;

              } catch (Exception e) {

                      e.printStackTrace();

              }

       }

           return false;

  }

注: 这里request需要在当前类中自动注解导入

        @Autowired

         private HttpServletRequest request;

 

 

 

 

 

 

 

 

 

 

 

 

### 前端传递MultipartFile到后端的方式 在前后端分离的应用场景下,前端可以通过`FormData`对象将文件数据封装并发送至后端。以下是具体实现方式: #### HTML部分 HTML页面中需要有一个文件输入框用于选择文件,并通过按钮触发上传逻辑。 ```html <form id="fileUploadForm"> <input type="file" name="file" id="fileInput"/> <button type="button" onclick="uploadFile()">上传</button> </form> ``` #### JavaScript部分 JavaScript代码负责创建`FormData`对象并将文件附加其中,随后通过`XMLHttpRequest`或`fetch API`将其发送到后端接口。 ```javascript function uploadFile() { const fileInput = document.getElementById('fileInput'); const formData = new FormData(); if (fileInput.files.length === 0) { alert("请选择要上传文件!"); return; } // 将选中的文件添加到formData对象中 formData.append('file', fileInput.files[0]); fetch('/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { console.log('Success:', data); alert("文件上传成功!"); }) .catch((error) => { console.error('Error:', error); alert("文件上传失败,请重试!"); }); } ``` 此代码片段展示了如何从前端收集文件并通过HTTP POST请求发送给后端[^1]。 #### 后端接收示例(Spring Boot) 后端可以利用Spring框架提供的`@RequestParam`注解绑定`MultipartFile`类型的参数。 ```java @RestController public class FileUploadController { @PostMapping("/upload") public ResponseEntity<String> handleFileUpload(@RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ResponseEntity.badRequest().body("请上传有效文件"); } try { // 获取原始文件名 String originalFilename = file.getOriginalFilename(); // 构建新文件名以防冲突 String extension = Objects.requireNonNull(originalFilename).substring(originalFilename.lastIndexOf(".")); String newFileName = UUID.randomUUID().toString() + extension; // 文件保存路径 Path path = Paths.get("uploads/" + newFileName); // 转存文件到指定位置 Files.copy(file.getInputStream(), path, StandardCopyOption.REPLACE_EXISTING); return ResponseEntity.ok("文件上传成功:" + newFileName); } catch (IOException e) { e.printStackTrace(); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("文件上传失败!"); } } } ``` 以上代码实现了基本的文件上传功能,包括验证、命名去重以及实际存储过程[^3]。 --- ### 注意事项 - 表单的编码类型需设为`multipart/form-data`以便支持大容量二进制数据传输。 - Spring框架提供了丰富的工具集简化了文件处理流程,例如`MockMultipartFile`可用于测试环境模拟文件上传行为[^2]。 - 对于安全性考虑,在接受任何外部文件前应执行严格的校验机制以防范潜在威胁[^4]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值