最近开始学习SpringMVC框架,在学习数据绑定的时候,发现可以使用@RequestParam注解绑定请求数据,实现了文件上传。但是如果一个项目是前后端分离的,前端系统向后端服务上传文件该怎么解决了?
首先考虑前端用哪一种方式进行文件上传,我选择了使用ajax的方式进行上传.
前端页面代码如下:
- <div id="login-window">
- <input type="file" id="file_upload"/>
- <input type="button" value="上传图片" id="upload"/>
- </div>
前端js代码如下:
- $("#upload").click(function(){
- var formData = new FormData();
- formData.append('file',$("#file_upload")[0].files[0]);
- $.ajax({
- type:"post",
- url:"http://127.0.0.1:8080/SpringMVC/Ajax/jsupload",
- async:false,
- contentType: false, //这个一定要写,发送信息至服务器时内容编码类型
- processData: false, //这个也一定要写,默认值: true。默认情况下,通过data选项传递进来的数据,
- //如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,
- // 以配合默认内容类型 "application/x-www-form-urlencoded"。
- //如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
- data:formData,
- dataType:'text', //返回类型,有json,text,HTML。这里并没有jsonp格式,所以别妄想能用jsonp做跨域了。
- success:function(data){
- console.log("上传完成")
- },
- error:function(XMLHttpRequest, textStatus, errorThrown, data){
- alert(errorThrown);
- }
- });
- });
后端代码如下:
后端代码写之前需要在Springmvc的配置文件中配置文件上传信息
- <!-- 配置文件上传参数 -->
- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
- <!--此处是配置限制文件上传大小,可以不用配置,采用默认值-->
- <property name="maxUploadSize">
- <value>1048576</value>
- </property>
- <!--此处是配置文件上传的字符集类型,防止乱码-->
- <property name="defaultEncoding">
- <value>UTF-8</value>
- </property>
- </bean>
配置完可以在SpringMVC的Controller类里面写上传的方法:
- @RequestMapping(value="/jsupload",method={RequestMethod.POST})
- public void paramBind(HttpServletRequest request,HttpServletResponse response,@RequestParam("file")CommonsMultipartFile formFile){
- MultipartFile formFile1 = ((MultipartHttpServletRequest)request).getFile("file");
- String path="E:/"+new Date().getTime()+formFile.getOriginalFilename();
- File newFile=new File(path);
- try {
- formFile.transferTo(newFile);
- } catch (IllegalStateException e) {
- e.printStackTrace();
- } catch (IOException e) {
- e.printStackTrace();
- }
- response.setHeader("Access-Control-Allow-Origin", "*");
- }
方法参数中的@RequestParam("file")CommonsMultipartFile formFile是采用注解的方式实现数据绑定。
在方法的最后response.setHeader("Access-Control-Allow-Origin", "*");这一行代码是实现ajax跨域传输的关键,如果是跨域传输,但是没有在响应头信息中设置Access-Control-Allow-Origin的值为 "*", 则会在前端控制台上提示:No 'Access-Control-Allow-Origin' header is present on the requested resource,但是此时文件已经上传到了后端服务器。如果前后端在同一个工程下则不会出现这个问题。
以上代码可以完成简单的前后端跨域传输。(学习笔记,如有错误感谢指正,不喜勿喷)