跨域上传图片Demo及分析

技术选型：nginx中配置跨域支持功能

配置代码：

在nginx.conf中配置

http  {
add_header Access -Control -Allow -Origin  *;
add_header Access -Control -Allow -Headers X -Requested -With ;
add_header Access -Control -Allow -Methods GET,POST,OPTIONS ;
}

这样就可以实现GET,POST,OPTIONS的跨域请求的支持
也可以 add_header Access-Control-Allow-Origin http://test.51testing.com; –指定允许的url;

应用环境：基于springBoot微服务/spring框架服务

技术选型：采用jQuery File Upload Plugin插件提交（GIT地址：https://github.com/blueimp/jQuery-File-Upload）

上传图片DEMO地址：https://github.com/mijingling/springBoot-fileupload

核心代码：

前端：

<input id = "fileupload" type = "file"  name = "imgUpload"  >
<script src = "util/jquery.1.9.1.min.js" ></script >
<script src = "plugins/js/vendor/jquery.ui.widget.js" ></script >
<script src = "plugins/js/jquery.iframe-transport.js" ></script >
<script src = "plugins/js/jquery.fileupload.js" ></script >
<script >
$ ( function  ( )  {
//上传
$ ( '#fileupload' ). fileupload ( {
xhrFields :  {
crossDomain :  true ,
withCredentials :  true
} ,
url :  "http://localhost:8099/jquery/cross/xmlupload" ,
multiple :  false ,
type :  "POST" ,
dataType :  'json' ,
done :  function  (e , data )  {
if (data. result. code == "success" ) {
var fullImgPath = "http://localhost:8099/" +data. result. imgPath ;
$ ( "#imgShow" ). attr ( "src" ,fullImgPath ) ;
$ ( "#imgHref" ). attr ( "href" ,fullImgPath ) ;
$ ( "#imgLabel" ). html (fullImgPath ) ;
$ ( "#resultCode" ). html (data. result. code ) ;
}
}
} ) ;
} ) ;
</script >

后端：

/**
* jquery图片上传-跨域-XMLHttpRequest提交
*/
@CrossOrigin
@RequestMapping (value  =  "/jquery/cross/xmlupload", method  = RequestMethod. POST )
public  String jqueryCross (HttpServletRequest request, HttpServletResponse response )  {
Map < String, String > rsMap  =  new HashMap <> ( ) ;
MultipartFile multipartFile = ( (MultipartHttpServletRequest ) request ). getFile ( "imgUpload" ) ;
String fileName  = multipartFile. getOriginalFilename ( ) ;
String suffix  = fileName. substring (fileName. lastIndexOf ( "." ) ) ; // 文件后缀
// key 以文件以时间命名，根据上传文件名取后缀
String objectkey  =  "upload/"  +  System. currentTimeMillis ( )  + suffix ;
File file  =  new  File ( "src/main/webapp/" +objectkey ) ;
try  {
FileUtils. copyInputStreamToFile (multipartFile. getInputStream ( ), file ) ;
}  catch  ( IOException e )  {
rsMap. put ( "code",  "failed" ) ;
System. out. println ( "接收图片出错" ) ;
return JSON. toJSONString (rsMap ) ;
}
//组装上传结果
rsMap. put ( "code",  "success" ) ;
rsMap. put ( "imgPath", objectkey ) ;
return JSON. toJSONString (rsMap ) ;
}