问题描述

项目中有一个需求，需要从客户端(网页)批量下载服务器存储的图片到本地，但是服务器只存储了图片url地址,图片本身存在于别的服务器上，当我们请求图片的时候,会出现跨域问题，尽管前端解决了跨域,但是还需要服务器允许跨域请求资源,因为有多个服务器所以从服务器端解决不太理想。

解决思路

首先,可以通过后台JAVA方法，把别的服务器上的图片下载到项目服务器(后台请求没有跨域的问题),下载到本地之后，在通过前端轮子从项目服务器下载就不会跨域了。

一. 后台下载

 public EiInfo ExportPhoto(EiInfo inInfo) {EiInfo outInfo = new EiInfo();HashMap map=new HashMap();//从前端获取查询条件map.put("number",inInfo.getBlock("inqu_status").getRow(0).get("number"));   map.put("jgsjStart",inInfo.getBlock("inqu_status").getRow(0).get("jgsjStart"));map.put("jgsjEnd",inInfo.getBlock("inqu_status").getRow(0).get("jgsjEnd"));map.put("deviceaddress",inInfo.getBlock("inqu_status").getRow(0).get("deviceaddress"));map.put("csys",inInfo.getBlock("inqu_status").getRow(0).get("csys"));map.put("hpys",inInfo.getBlock("inqu_status").getRow(0).get("hpys"));map.put("cerType",inInfo.getBlock("inqu_status").getRow(0).get("cerType"));map.put("fxbh",inInfo.getBlock("inqu_status").getRow(0).get("fxbh"));//获取需要导出的数据集List<HashMap> list = dao.query( "BMGS02.queryJgclPhoto", map);List result = list;int num=0;ArrayList arrayList = new ArrayList();//遍历数据集,获取每条数据的图片地址 for(int i=0;i<result.size();i++){BM05 bm05  = new BM05();bm05.fromMap((Map) result.get(i));int i1 = bm05.getTpurl().lastIndexOf("/");   //因为图片地址很长,我们需要找到图片名称并截取出来,图片下载到服务器上之后重新拼接上服务器IP形成新的地址String substring = bm05.getTpurl().substring(i1+1, bm05.getTpurl().length()); arrayList.add(substring);//调用根据url下载图片的方法,需要传下载的url，下载路径（建议在项目所在文件夹创建文件，因为浏览器保护没办法直接访问到项目服务器的本地文件,但是我们可以访问项目文件）,图片名称boolean b = httpDownload("图片地址", "图片下载地址" + substring);  if(b){num+=1;}}outInfo.set("photoList",arrayList);return outInfo;
}
public static boolean httpDownload(String httpUrl, String saveFile) {// 1.下载网络文件int byteRead;URL url;try {url = new URL(httpUrl);} catch (MalformedURLException e1) {e1.printStackTrace();return false;}try {//2.获取链接URLConnection conn = url.openConnection();//3.输入流InputStream inStream;inStream = conn.getInputStream();//3.写入文件   FileOutputStream fs = new FileOutputStream(saveFile);byte[] buffer = new byte[1024];while ((byteRead = inStream.read(buffer)) != -1) {fs.write(buffer, 0, byteRead);}inStream.close();fs.close();return true;} catch (FileNotFoundException e) {e.printStackTrace();return false;} catch (IOException e) {e.printStackTrace();return false;}
}//删除指定文件夹下的所有文件，避免下载图片过多导致服务器内存不足
public EiInfo deletePhoto(EiInfo inInfo) {delAllFile(文件路径); return  inInfo;
}
public static boolean delAllFile(String path){boolean flag = false;File file = new File(path);if(!file.exists()){return flag;}if (!file.isDirectory()) {return  flag;}String[] tempList = file.list();File temp = null;for (int i = 0; i < tempList.length; i++) {if (path.endsWith(File.separator)) {temp = new File(path  + tempList[i]);} else {temp = new File(path + File.separator + tempList[i]);}if (temp.isFile()) {temp.delete();}if (temp.isDirectory()) {delAllFile(path + "/" + tempList[i]);//先删除文件夹里面的文件//                delFolder(path + "/" + tempList[i]);//再删除空文件夹flag = true;}}return flag;}

二.前端下载

//引入需要的js
<script src="../static/js/jszip.js"></script>
<script src="../static/js/FileSaver.js"></script>//先从服务器上下载图片 然后清除服务器上缓存下来的图片var photoList=eiInfo.get("photoList");  //获取服务器上新的图片地址列表var photoArr=[];for(var i=0;i<photoList.length;i++){ //遍历图片列表//根据图片名称 拼接图片对象photoArr.push({url:"http://localhost:8080/rc/static/downPhoto/"+photoList[i],name:photoList[i]}) }//调用批量下载图片的方法FunLib.download(photoArr);//   下载图片
var FunLib = {     //该方法需要服务器支持跨域 或者从跨域的服务器上获取图片到本地服务器// 图片打包下载download: function (images) {FunLib.packageImages(images)},// 打包压缩图片packageImages: function (imgs) {var imgBase64 = []var imageSuffix = [] // 图片后缀var zip = new JSZip()var img = zip.folder("images")for (var i = 0; i < imgs.length; i++) {var src = imgs[i].urlvar suffix = src.substring(src.lastIndexOf("."))imageSuffix.push(suffix)FunLib.getBase64(imgs[i].url).then(function (base64) {imgBase64.push(base64.substring(22))if (imgs.length === imgBase64.length) {for (var i = 0; i < imgs.length; i++) {img.file(imgs[i].name + imageSuffix[i], imgBase64[i], {base64: true})}zip.generateAsync({type: "blob"}).then(function (content) {saveAs(content, "images.zip")downPhoto=true;})}}, function (err) {console.log(err)})}},// 传入图片路径，返回base64getBase64: function (img) {var image = new Image()image.src = img+'?time=' + new Date().valueOf();image.crossOrigin = '*';var deferred = $.Deferred()if (img) {image.onload = function () {var canvas = document.createElement("canvas")canvas.width = image.widthcanvas.height = image.heightvar ctx = canvas.getContext("2d")ctx.drawImage(image, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL()deferred.resolve(dataURL)}return deferred.promise()}}
}

三.过程中的坑
1.跨域不仅需要前端解决,还需要资源服务器允许跨域
2.图片下载到项目服务器时,如果下载到本地目录里,那么前端无法通过ip:8080路径访问到图片。所以需要在项目文件夹里新建文件存放图片。
3.tomcat文件新增图片资源的时候需要加载图片,不然虽然可以在文件里看到图片,但是再打开的项目上无法访问到图片。把文件建在构建好的文件里，就不会出现tomcat需要时间加载的问题了。
4.下载完图片记得删除,不然可能占太多服务器内存。

前端下载其他服务器上的跨域图片资源问题相关推荐

【前端44_前后端交互_跨域】前端解决：JSONP、后端解决：CORS 、后端代理
文章目录跨域什么是跨域前端解决: JSONP 实现原理步骤前端:创建标签,拼接传递参数后端:接收值,返回值封装 Ajax 代码在封装的 Ajax 中添加 JSONP 需求思路练习: ...
前端必须懂的计算机网络知识—(跨域、代理、本地存储)
前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题计算机网络的分层模型 IP地址和MAC地址前端必须懂的计算机网络知识-(跨域.代理.本地存储) 前端必须懂的计算机网络知识-(TCP) ...
前端面试查漏补缺--(三) 跨域及常见解决办法
前言本系列最开始是为了自己面试准备的.后来发现整理越来越多,差不多有十二万字符,最后决定还是分享出来给大家. 为了分享整理出来,花费了自己大量的时间,起码是只自己用的三倍时间.如果喜欢的话,欢迎收藏 ...
前端代码放在服务器什么位置,前端代码在服务器上如何配置
前端代码在服务器上如何配置内容精选换一换代码迁移工具进行代码迁移时,需要调用Linux下的rpm.deb等命令才能完成扫描和迁移相关任务,这些命令和逻辑必须在后端Linux运行.IDE插件只支持 ...
SpringCloud工作笔记043---SpringCloud 从整体上解决跨域问题_zuul网关配置实现跨域
JAVA技术交流QQ群:170933152 自己用的: 注意,测试,发现如果网关做了跨域处理,其他地方就不要再做了,比如其他微服务,否则前端访问的时候会报跨域问题. ---------------- ...
本地主机作服务器解决AJAX跨域请求访问数据的方法
本地主机作服务器解决AJAX跨域请求访问数据的方法参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...
下载微信服务器上的图片到自己的服务器
下载微信服务器上的图片到自己的服务器微信上传图片后单张图片将返回serverId 多张图片将返回serverId数组,后续只需遍历下载即可下载微信服务器上的图片工具类 ... import j ...
前端：下载文件实现方式及跨域下载（详解）
前言:本文详细介绍在开发过程中前端如何与后端配合实现文件下载至本地,并详细说明特殊格式文件如何处理.如果你是一名前端开发者,恰好需要实现后端文件下载至本地的需求,那么恭喜你本篇文章一定会帮到你! 需求 ...
nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...

前端下载其他服务器上的跨域图片资源问题

问题描述

解决思路

前端下载其他服务器上的跨域图片资源问题相关推荐

最新文章

热门文章