Spring Boot文件上传示例（Ajax和REST）

本文介绍如何使用Ajax请求在Spring Boot Web应用程序(REST结构)中上传文件。

本文中使用的工具：

  • Spring Boot 1.4.3.RELEASE
  • Spring 4.3.5.RELEASE
  • Thymeleaf
  • jQuery (webjars)
  • Maven
  • Embedded Tomcat 8.5.6
  • Google Chrome浏览器

1. 项目结构

一个标准的Maven项目结构。如下图所示 -

2. 项目依赖

声明一个额外的jQuery webjar依赖关系，适用于HTML格式的Ajax请求。

文件：pom.xml
```xml
4.0.0

<groupId>com.yiibai</groupId>
<artifactId>spring-boot-file-upload</artifactId>
<packaging>jar</packaging>
<version>1.0</version>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.3.RELEASE</version>
</parent>

<properties>
    <java.version>1.8</java.version>
</properties>

<dependencies>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <!-- hot swapping, disable cache for template, enable live reload -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>

    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>2.2.4</version>
    </dependency>

</dependencies>

<build>
    <plugins>
        <!-- Package as an executable jar/war -->
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>


## 3.文件上传
为了支持Ajax请求和响应，最简单的解决方案返回一个ResponseEntity。
以下示例演示了上传文件的三种可能方式：
1. 单文件上传 - `MultipartFile`
2. 多文件上传 - `MultipartFile []`
3. 将文件上传到模型 - `@ModelAttribute`

*文件：RestUploadController.java*

```java
package com.yiibai.controller;

import com.yiibai.model.UploadModel;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

@RestController
public class RestUploadController {

    private final Logger logger = LoggerFactory.getLogger(RestUploadController.class);

    //Save the uploaded file to this folder
    private static String UPLOADED_FOLDER = "D://temp//";

    //Single file upload
    @PostMapping("/api/upload")
    // If not @RestController, uncomment this
    //@ResponseBody
    public ResponseEntity<?> uploadFile(
            @RequestParam("file") MultipartFile uploadfile) {

        logger.debug("Single file upload!");

        if (uploadfile.isEmpty()) {
            return new ResponseEntity("please select a file!", HttpStatus.OK);
        }

        try {

            saveUploadedFiles(Arrays.asList(uploadfile));

        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity("Successfully uploaded - " +
                uploadfile.getOriginalFilename(), new HttpHeaders(), HttpStatus.OK);

    }

    // Multiple file upload
    @PostMapping("/api/upload/multi")
    public ResponseEntity<?> uploadFileMulti(
            @RequestParam("extraField") String extraField,
            @RequestParam("files") MultipartFile[] uploadfiles) {

        logger.debug("Multiple file upload!");

        String uploadedFileName = Arrays.stream(uploadfiles).map(x -> x.getOriginalFilename())
                .filter(x -> !StringUtils.isEmpty(x)).collect(Collectors.joining(" , "));

        if (StringUtils.isEmpty(uploadedFileName)) {
            return new ResponseEntity("please select a file!", HttpStatus.OK);
        }

        try {

            saveUploadedFiles(Arrays.asList(uploadfiles));

        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity("Successfully uploaded - "
                + uploadedFileName, HttpStatus.OK);

    }

    // maps html form to a Model
    @PostMapping("/api/upload/multi/model")
    public ResponseEntity<?> multiUploadFileModel(@ModelAttribute UploadModel model) {

        logger.debug("Multiple file upload! With UploadModel");

        try {

            saveUploadedFiles(Arrays.asList(model.getFiles()));

        } catch (IOException e) {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

        return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);

    }

    //save file
    private void saveUploadedFiles(List<MultipartFile> files) throws IOException {

        for (MultipartFile file : files) {

            if (file.isEmpty()) {
                continue; //next pls
            }

            byte[] bytes = file.getBytes();
            Path path = Paths.get(UPLOADED_FOLDER + file.getOriginalFilename());
            Files.write(path, bytes);

        }

    }
}

以上示例的简单模型 - @ModelAttribute，文件：UploadModel.java -

package com.yiibai.model;

import org.springframework.web.multipart.MultipartFile;

import java.util.Arrays;

public class UploadModel {

    private String extraField;

    private MultipartFile[] files;

    public String getExtraField() {
        return extraField;
    }

    public void setExtraField(String extraField) {
        this.extraField = extraField;
    }

    public MultipartFile[] getFiles() {
        return files;
    }

    public void setFiles(MultipartFile[] files) {
        this.files = files;
    }

    @Override
    public String toString() {
        return "UploadModel{" +
                "extraField=‘" + extraField + ‘\‘‘ +
                ", files=" + Arrays.toString(files) +
                ‘}‘;
    }
}

Java

视图文件

多个文件上传的HTML表单。文件：upload.html -

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<h2>Spring Boot多文件上传示例(使用AJAX)</h2>

<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
    <input type="text" name="extraField"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="提交" id="btnSubmit"/>
</form>

<h1>Ajax提交结果：</h1>
<pre>
    <span id="result"></span>
</pre>

<script type="text/javascript" src="webjars/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</body>
</html>

HTML

5. jQuery - Ajax请求

jQuery通过表单#id获取表单，并通过Ajax请求发送多部分(multipart)表单数据。文件：resources/static/js/main.js -

$(document).ready(function () {

    $("#btnSubmit").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        fire_ajax_submit();

    });

});

function fire_ajax_submit() {

    // Get form
    var form = $(‘#fileUploadForm‘)[0];

    var data = new FormData(form);

    data.append("CustomField", "This is some extra data, testing");

    $("#btnSubmit").prop("disabled", true);

    $.ajax({
        type: "POST",
        enctype: ‘multipart/form-data‘,
        url: "/api/upload/multi",
        data: data,
        //http://api.jquery.com/jQuery.ajax/
        //http://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
        processData: false, //prevent jQuery from automatically transforming the data into a query string
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {

            $("#result").text(data);
            console.log("SUCCESS : ", data);
            $("#btnSubmit").prop("disabled", false);

        },
        error: function (e) {

            $("#result").text(e.responseText);
            console.log("ERROR : ", e);
            $("#btnSubmit").prop("disabled", false);

        }
    });

}

Js

6. 异常处理程序

要处理来自Ajax请求的异常，只需扩展ResponseEntityExceptionHandler并返回一个ResponseEntity。文件：RestGlobalExceptionHandler.java -

package com.yiibai.exception;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartException;
import org.springframework.web.servlet.mvc.method.annotation.ResponseEntityExceptionHandler;

import javax.servlet.http.HttpServletRequest;

//http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#boot-features-error-handling
@ControllerAdvice
public class RestGlobalExceptionHandler extends ResponseEntityExceptionHandler {

    @ExceptionHandler(MultipartException.class)
    @ResponseBody
    ResponseEntity<?> handleControllerException(HttpServletRequest request, Throwable ex) {

        HttpStatus status = getStatus(request);

        return new ResponseEntity(new CustomError("0x000123", "Attachment size exceeds the allowable limit! (10MB)"), status);

        //return new ResponseEntity("Attachment size exceeds the allowable limit! (10MB)", status);

        // example
        //return new ResponseEntity(ex.getMessage(), status);
        //return new ResponseEntity("success", responseHeaders, HttpStatus.OK);

    }

    private HttpStatus getStatus(HttpServletRequest request) {
        Integer statusCode = (Integer) request.getAttribute("javax.servlet.error.status_code");
        if (statusCode == null) {
            return HttpStatus.INTERNAL_SERVER_ERROR;
        }
        return HttpStatus.valueOf(statusCode);
    }

}

Java

7. 运行演示

使用默认的嵌入式Tomcat的启动Spring Boot命令：mvn spring-boot:run.。
访问：http://localhost:8080/ ，选择几个文件并单击提交以触发ajax请求。

提示：打开目录：F:/temp 应该能看到上传的文件。

时间： 2024-10-07 06:39:10

Spring Boot文件上传示例（Ajax和REST）的相关文章

Spring Boot文件上传

一.创建一个简单的包含WEB依赖的SpringBoot项目 二.配置文件上传的文件大小限制 # 上传文件总的最大值spring.servlet.multipart.max-request-size=10MB# 单个文件的最大值spring.servlet.multipart.max-file-size=10MB 三.单文件上传示例 只有一个表单,选择文件,form的enctype为multipart/form-data: file.transferTo(dest); 原文地址:https://w

Spring Boot 文件上传简易教程

上传文件是我们日常使用最为广泛的功能之一,比如App端上传头像.本章演示如何从客户端上传到 Spring Boot 开发的 Api中. 本项目源码 github 下载 1 新建 Spring Boot Maven 示例工程项目 注意:本示例是用 IDEA 开发工具 File > New > Project,如下图选择 Spring Initializr 然后点击 [Next]下一步 填写 GroupId(包名).Artifact(项目名) 即可.点击 下一步 groupId=com.fishp

spring实现文件上传（图片解析）

合抱之木,生于毫末,千里之行,始于足下,要想了解spring的文件上传功能,首先要知道spring是通过流的方式将文件进行解析,然后上传.那么是不是所有需要用的文件上传的地方都要写一遍文件解析器呢? 放心,spring这个大管家已经为我们做好了一切! 我们只需要在spring的配置文件中加入下面代码: <!-- 文件上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.mu

Spring的文件上传

Spring在发现包含multipart的请求后,会使用MultipartResolver的实现bean处理文件上传操作,现有采用Servlet3的 org.springframework.web.multipart.support.StandardServletMultipartResolver 和采用commons-fileupload的 org.springframework.web.multipart.commons.CommonsMultipartResolver 处理文件的上传需要重

ajax 文件上传，ajax

ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile" onclick="clearProgressInfo()"/> <span id="progressInfo" style="display:none;"> <progress id="progressBar

asp.net core系列 69 Amazon S3 资源文件上传示例

原文:asp.net core系列 69 Amazon S3 资源文件上传示例 一.  上传示例 Amazon Simple Storage Service 是互联网存储解决方案.该服务旨在降低开发人员进行网络规模级计算的难度. Amazon S3 提供了一个简单 Web 服务接口,可用于随时在 Web 上的任何位置存储和检索任何数量的数据.此服务让所有开发人员都能访问同一个具备高扩展性.可靠性.安全性和快速价廉的数据存储基础设施, Amazon 用它来运行其全球的网站网络.此服务旨在为开发人员

Spring MVC文件上传出现错误：Required MultipartFile parameter &#39;file&#39; is not present

1.配置文件上传的解析器 首先需要在spring mvc的配置文件中(注意是spring mvc的配置文件而不是spring的配置文件:applicationContext.xml)配置: springmvc-config.xml <!-- 文件上传bean--> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartReso

spring定时任务-文件上传进度条

spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId>quartz</artifactId> <version>2.2.3</version> </depen

Spring MVC 文件上传

1.form的enctype=”multipart/form-data” 这个是上传文件必须的 2.applicationContext.xml中 <bean id=”multipartResolver” class=”org.springframework.web.multipart.commons.CommonsMultipartResolver”/> 关于文件上传的配置不能少 3.需要commons.fileupload和commons.io的jar包 Spring的配置文件 <!