springboot+jersey+tomcat实现跨域方式上传文件到服务器的方式

下面是 "springboot+jersey+tomcat实现跨域方式上传文件到服务器的方式" 的攻略：

简介

跨域问题是Web开发中常遇到的问题。在前后端分离的情况下，常常需要从前端页面中上传文件到服务器。本文将介绍如何在使用SpringBoot + Jersey框架的项目中实现跨域方式上传文件到服务器的方式。

第一步：在pom.xml中添加依赖

首先，在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter</artifactId>
    <version>2.3.4.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-jersey</artifactId>
    <version>2.3.4.RELEASE</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.jaxrs</groupId>
    <artifactId>jackson-jaxrs-json-provider</artifactId>
    <version>2.11.2</version>
</dependency>

这些依赖包含了SpringBoot、Jersey框架和用于序列化JSON的Jackson框架。

第二步：实现上传文件的代码

在代码中添加一个接收文件上传的接口，使用Jersey注解 @Path、@POST 和 @Consumes。

@Component
@Path("upload")
public class FileResource {
    @Context
    private ServletContext context;

    @POST
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(@FormDataParam("file") InputStream inputStream,
                               @FormDataParam("file") FormDataContentDisposition fileDetail) {
        String fileName = fileDetail.getFileName();
        String filePath = context.getRealPath("/upload/") + fileName;
        FileUtil.writeToFile(inputStream, filePath);
        String output = "File successfully uploaded to : " + filePath;
        return Response.status(200).entity(output).build();
    }
}

在接口的实现中，使用 InputStream 和 FormDataContentDisposition 参数获取上传文件的信息。使用 ServletContext 将文件保存在服务器上。

第三步：解决跨域问题

使用 Jersey 提供的过滤器实现跨域。

在代码中添加一个类，继承 ContainerRequestFilter，并添加 @Provider 注解：

@Provider
public class CORSFilter implements ContainerRequestFilter {
    @Override
    public void filter(ContainerRequestContext requestContext) throws IOException {
        MultivaluedMap<String, String> headers = requestContext.getHeaders();
        headers.add("Access-Control-Allow-Origin", "*");
        headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        headers.add("Access-Control-Allow-Headers", "Content-Type");
        headers.add("Access-Control-Max-Age", "86400");
    }
}

这个过滤器设置了允许从任何源请求，允许的请求方法是 GET、POST、DELETE、PUT，响应头中允许的内容类型是"Content-Type"，并且响应缓存时间为一天。

第四步：设置文件上传的配置

使用 application.properties 文件或者 application.yml 文件设置文件上传的配置，包括上传文件大小限制：

# 文件上传配置
# 设置最大文件上传为20MB
spring.servlet.multipart.max-file-size=20MB
# 设置总上传数据总大小为30MB
spring.servlet.multipart.max-request-size=30MB

示例1：JavaScript AJAX 实现文件上传

在前端页面中，使用 JavaScript AJAX 实现文件上传，如下所示：

<input type="file" id="file-input"/>
<button onclick="upload()">Upload</button>

<script>
    function upload() {
        var input = document.getElementById('file-input');
        var file = input.files[0];
        var formData = new FormData();
        formData.append('file', file);
        $.ajax({
            url: 'http://localhost:8080/upload',
            data: formData,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function (data) {
                document.getElementById('result').innerText = data;
            },
            error: function (error) {
                console.log(error);
            }
        })
    }
</script>

示例2：HTML FORM 表单实现文件上传

在前端页面中，使用 HTML FORM 表单实现文件上传，如下所示：

<form action="http://localhost:8080/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="Upload"/>
</form>

总结

在本文中，我们介绍了如何在 SpringBoot + Jersey 项目中实现跨域方式上传文件到服务器的方式。具体步骤包括添加依赖、实现上传文件的代码、解决跨域问题和设置文件上传的配置。我们还提供了两个示例，以便读者更加深入地了解如何在前端页面中实现文件上传。