Java实例讲解文件上传与跨域问题

下面就详细讲解一下“Java实例讲解文件上传与跨域问题”的完整攻略。

1.文件上传

1.1 上传方式

文件上传一般采用POST方式，将文件的二进制数据通过HTTP协议上行到服务端。上传过程中需要注意的是设置表单的enctype属性为multipart/form-data，这样可以支持上传文件类型的表单。

1.2 服务端实现

服务端往往需要采用特定的框架或库来解析传递过来的二进制数据。常见的框架有Apache Commons FileUpload和Spring MVC框架中的MultipartResolver。以下是基于Spring MVC框架的上传文件实现示例：

@RequestMapping(value = "upload", method = RequestMethod.POST)
@ResponseBody
public String upload(HttpServletRequest request) throws IOException, ServletException {
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());

    if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        Iterator<String> iter = multiRequest.getFileNames();

        while (iter.hasNext()) {
            MultipartFile file = multiRequest.getFile(iter.next());
            if (file != null && !file.isEmpty()) {
                String fileName = file.getOriginalFilename();
                String contentType = file.getContentType();
                byte[] bytes = file.getBytes();
                // 把文件写到指定路径
                // ...
            }
        }
    }

    return "success";
}

1.3 前端实现

前端实现需要用到HTML5的FormData API，用来将文件类型的表单封装成二进制数据，再通过AJAX将数据上传到服务端。以下是基于jQuery的文件上传实现示例：

<form method="post" enctype="multipart/form-data">
    <input type="file" id="file"/>
    <button type="button" id="upload">上传</button>
</form>

$('#upload').click(function() {
    var formData = new FormData();
    formData.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: 'upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            console.log(data);
        }
    });
});

2.跨域问题

2.1 什么是跨域？

当一个资源被Web页面从不同的域、协议或端口请求时，就会发生跨域。同源策略限制了来自一个脚本中的文档或脚本怎样能够与来自其它源的资源进行交互。

2.2 解决方案

• JSONP：在服务器端动态生成一个JavaScript文件，该文件会在客户端被调用。JSONP的回调函数名是通过URL传参传到服务器端的。JSONP的实现原理是利用了script标签不受同源策略限制的特点，通过script加载远程的JavaScript文件，进而实现数据的传递。
• CORS：跨域资源共享（CORS）是一种Web浏览器的技术规范，它为Web服务器规定了一种让其它域名下的Web页面可以访问其内部资源的机制，从而解决了跨域问题。

2.3 示例说明

以下代码是一个基于Spring MVC + jQuery + CORS的示例，实现了从跨域的页面通过AJAX请求访问服务端接口：

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

@RequestMapping("/api")
@RestController
public class ApiController {

    @PostMapping("/login")
    public String login(@RequestBody User user) {
        return "success";
    }

}

$.ajax({
    url: 'http://localhost:8080/api/login',
    type: 'POST',
    data: {username: 'admin', password: '123456'},
    xhrFields: { withCredentials: true },
    success: function(data) {
        console.log(data);
    }
});

这里允许所有域名的请求通过，通过withCredentials参数将Cookies发送到服务器端。