java实现后台图片跨域上传功能

跨域的原因

在项目开发的过程中,我们经常需要用到图片上传操作,传统的做法是我们将其上传到项目的所在目录中,比如说项目的target目录中,但是由于项目在重启的过程中,target文件夹下的内容会被全部清空,这意味着如果采用这种方式,那么在测试环境与开发环境;在每一次的项目重启的过程中,我们经常会遭遇图片丢失的情况,这种情况有时往往很让人头疼,因而有一个图片服务器对于项目的开发和测试而言,这是十分必要的。

跨域的实现原理

在采用图片服务器的情况下,我们只需要像往常一样,由前台界面将图片上传到本地项目服务器中,然后本地的项目服务器会将该图片的数据流写入到远程的图片服务器中,由远程的图片服务器负责图片的存储,最后,远程的图片服务器会返回一个存储图片路径,在本地的服务器只需要存储该路径,在页面展示的时候,只需要在前台将该图片路径展示出来,即可完成对于远程图片服务器的调用。

本地服务器源码

@ResponseBody
 @RequestMapping(value="/imgUpLoadNewOneKuaYu")
 public String imgUpLoadNewOneKuaYu(HttpServletRequest request) throws IOException {
   String urlStr = "http://localhost:9080/no-js/admin/upload";
   Map<String, String> textMap = new HashMap<String, String>();
   MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;//流的数据*
   //取得request中的所有文件名
    Iterator<String> iter = multiRequest.getFileNames();
    Map<String, InputStream> fileMap = new HashMap<String, InputStream>();
    if(iter.hasNext()){
     //取得上传文件
     MultipartFile file = multiRequest.getFile(iter.next());
     if(file != null){
      //取得当前上传文件的文件名称
      String myFileName = file.getOriginalFilename();
      InputStream fileInputStream=file.getInputStream();
      fileMap.put(myFileName, fileInputStream);
     }
    }
   String ret = FileUpLoadNew.formUpload(urlStr, textMap, fileMap);
   System.out.println(ret);
   return ret;
 }

FileUpLoadNew

package net.sahv.bdyz.util;

import java.io.BufferedReader;
import java.io.DataInputStream;
import java.io.DataOutputStream;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Iterator;
import java.util.Map;

public class FileUpLoadNew {

 /**
  * @param urlStr
  * @param textMap
  * @param fileMap
  * @return
  */
 public static String formUpload(String urlStr, Map<String, String> textMap, Map<String, InputStream> fileMap) {
  String res = "";
  HttpURLConnection conn = null;
  String BOUNDARY = "---------------------------123821742118716"; //boundary就是request头和上传文件内容的分隔符
  try {
   URL url = new URL(urlStr);
   conn = (HttpURLConnection) url.openConnection();
   conn.setConnectTimeout(5000);
   conn.setReadTimeout(30000);
   conn.setDoOutput(true);
   conn.setDoInput(true);
   conn.setUseCaches(false);
   conn.setRequestMethod("POST");
   conn.setRequestProperty("Connection", "Keep-Alive");
   conn.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.6)");
   conn.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
   OutputStream out = new DataOutputStream(conn.getOutputStream());
   // textMap:如果传送的是文本内容
   if (textMap != null) {
    StringBuffer strBuf = new StringBuffer();
    Iterator<Map.Entry<String, String>> iter = textMap.entrySet().iterator();
    while (iter.hasNext()) {
     Map.Entry<String, String> entry = iter.next();
     String inputName = (String) entry.getKey();
     String inputValue = (String) entry.getValue();
     if (inputValue == null) {
      continue;
     }
     strBuf.append("\r\n").append("--").append(BOUNDARY).append("\r\n");
     strBuf.append("Content-Disposition: form-data; name=\"" + inputName + "\"\r\n\r\n");
     strBuf.append(inputValue);
    }
    out.write(strBuf.toString().getBytes());
   }
   //fileMap:如果传送的是文件流
   if (fileMap != null) {
    Iterator<Map.Entry<String, InputStream>> iter = fileMap.entrySet().iterator();
    while (iter.hasNext()) {
     Map.Entry<String, InputStream> entry = iter.next();
     String inputName = (String) entry.getKey();
     FileInputStream inputValue = (FileInputStream) entry.getValue();
     if (inputValue == null) {
      continue;
     }
     String contentType = "image/png";
     StringBuffer strBuf = new StringBuffer();
     strBuf.append("\r\n").append("--").append(BOUNDARY).append("\r\n");
     strBuf.append("Content-Disposition: form-data; name=\"" + inputName + "\"; filename=\"" + inputName + "\"\r\n");
     strBuf.append("Content-Type:" + contentType + "\r\n\r\n");
     out.write(strBuf.toString().getBytes());
     DataInputStream in = new DataInputStream(inputValue);
     int bytes = 0;
     byte[] bufferOut = new byte[1024];
     while ((bytes = in.read(bufferOut)) != -1) {
      out.write(bufferOut, 0, bytes);
     }
     in.close();
    }
   }
   byte[] endData = ("\r\n--" + BOUNDARY + "--\r\n").getBytes();
   out.write(endData);
   out.flush();
   out.close();
   // 读取返回数据
   StringBuffer strBuf = new StringBuffer();
   BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
   String line = null;
   while ((line = reader.readLine()) != null) {
    strBuf.append(line).append("\n");
   }
   res = strBuf.toString();
   reader.close();
   reader = null;
  } catch (Exception e) {
   System.out.println("发送POST请求出错。" + urlStr);
   e.printStackTrace();
  } finally {
   //最后关闭链接
   if (conn != null) {
    conn.disconnect();
    conn = null;
   }
  }
  return res;
 }
}

图片服务器源码

package com.lyc.noJs.controller;

import com.google.common.base.Splitter;
import com.lyc.noJs.util.ImgMD5Util;
import lombok.extern.slf4j.Slf4j;
import org.joda.time.DateTime;
import org.springframework.stereotype.Controller;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.*;
import java.security.NoSuchAlgorithmException;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Set;

@Controller
@RequestMapping("/admin")
@Slf4j
public class UploadController {

 @ResponseBody
 @RequestMapping(value = "/upload",method= RequestMethod.POST)
 public String upload(MultipartHttpServletRequest multiRequest) throws UnsupportedEncodingException {
  //图片文件夹根路径
  //TODO
  //这里的父路径暂时是target路径,在真实上线后,应该将其改成其它路径。
  String uploadFilePath = multiRequest.getServletContext().getRealPath("/upload/");
  //图片文件夹日期路径
  String datePath = getDateFolderName() + "\\";
  //图片名称
  String imagePath = saveImage(multiRequest,uploadFilePath,datePath);
  log.info(imagePath);
  return imagePath;
 }

 /**
  * 保存图片
  * @param multiRequest
  * @param uploadFilePath
  * @param datePath
  * @return
  * @throws UnsupportedEncodingException
  */
 public String saveImage(MultipartHttpServletRequest multiRequest,String uploadFilePath,String datePath) throws UnsupportedEncodingException {
  String imageNameHead = createImageNameHead();
  String imageName = "";
  //设置图片的浏览为utf-8格式,防止图片名称乱码
  multiRequest.setCharacterEncoding("utf-8");
  MultiValueMap<String, MultipartFile> multiFileMap = multiRequest.getMultiFileMap();
  Set<Map.Entry<String, List<MultipartFile>>> set = multiFileMap.entrySet();
  Iterator<Map.Entry<String, List<MultipartFile>>> iterator = set.iterator();
  while(iterator.hasNext()){
   Map.Entry<String, List<MultipartFile>> entry = iterator.next();
   String imageNameEnd = getImageNameEnd(entry);
   imageName = imageNameHead + "." + imageNameEnd;
   List<MultipartFile> multipartFileList = entry.getValue();
   MultipartFile multipartFile = multipartFileList.get(0);
   //图片文件的包路径
   String imagePath = uploadFilePath + datePath;
   //如果文件夹创建失败,则返回null
   if(makeParentFolder(imagePath)){  //如果文件夹创建失败,则返回false,否则返回true
    //图片文件的路径
    String imgFile = imagePath + imageName;
    //如果文件创建失败,则返回null
    if(!makeImage(multipartFile,imgFile)){ //当文件创建失败时,返回false,否则返回true
     return null;
    }
   } else {
    return null;
   }
  }
  return datePath + imageName;
 }

 /**
  * 创建图片
  * @param multipartFile
  * @param imgFile
  * @return
  */
 public boolean makeImage(MultipartFile multipartFile,String imgFile){
  File tempFile = new File(imgFile);
  if(tempFile != null){
   //如果原图片不存在,则生成图片
   if(!tempFile.exists()){
    try {
     log.info("1");
     multipartFile.transferTo(tempFile);
    } catch (IOException e) {
     e.printStackTrace();
    }
   }
   return true;
  }
  return false;
 }

 /**
  * 创建父文件路径
  * @param imagePath
  * @return
  */
 public boolean makeParentFolder(String imagePath){
  File parentFile = new File(imagePath);
  if(parentFile != null){
   while (!parentFile.exists()){
    //批量生成全部的父文件路径
    parentFile.mkdirs();
   }
   return true;
  }
  return false;
 }

 /**
  * 文件夹生成规则
  */
 public String getDateFolderName(){
  DateTime dataTime = new DateTime();
  String currentDate = dataTime.toString("yyyy\\MM\\dd");
  return currentDate;
 }

 /**
  * 创建图片文件的文件名
  * @return
  */
 public String createImageNameHead(){
  DateTime dataTime = new DateTime();
  return String.valueOf(dataTime.getMillis());
 }
}

测试

本地服务器

比如说本地一次上传多张图片,如下图所示:

当我们点击上传后,页面显示结果:

本地图片服务器后台打印结果:

2018\04\09\1523257444813.jpg
2018\04\09\1523257444944.jpg
2018\04\09\1523257445078.jpg
2018\04\09\1523257445202.jpg
2018\04\09\1523257445360.jpg
2018\04\09\1523257445484.jpg
2018\04\09\1523257445593.jpg
2018\04\09\1523257445742.jpg

图片的访问路径 = 服务器地址 + 回传的图片相对地址

即下面的地址:

http://localhost:9080/no-js/upload/2018/04/09/1523257444813.jpg

其显示的结果为:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持。

(0)

相关推荐

  • Java使用Ajax实现跨域上传图片功能

    说明 : 图片服务器是用Nginx搭建的,用的是PHP语言 这个功能 需要 用到两个js文件: jquery.js和jQuery.form.js <script type="text/JavaScript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.form.js"></scri

  • Cors实现java后端完全跨域实例

    http://www.jb51.net/article/114838.htm这篇文章很详细的介绍了JS的跨域,给出的解决方案是springboot的方式,假如不用spring boot 或者 spring版本低于4.2就需要自己实现: 参考了spring boot的实现方式,并有所简化,代码如下: package com.lvluo.web.filter.CorsFilter; import java.io.IOException; import javax.servlet.Filter; im

  • 详解Java Ajax jsonp 跨域请求

    1.什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析. JSONP是

  • Java实现CORS跨域请求的实现方法

    问题 使用前后端分离模式开发项目时,往往会遇到这样一个问题 -- 无法跨域获取服务端数据 这是由于浏览器的同源策略导致的,目的是为了安全.在前后端分离开发模式备受青睐的今天,前端和后台项目往往会在不同的环境下进行开发,这时就会出现跨域请求数据的需求,目前的解决方案主要有以下几种: JSONP.iframe.代理模式.CORS等等 前面几种方式在这里不讲,网上有很多资料.在这里我主要分享一下CORS这种解决方式,CORS即"跨域资源共享",它允许浏览器向跨源服务器,发出XMLHttpRe

  • Java跨域问题的处理详解

    前言 相信大家在写前端脚本的时候经常会遇到发送数据到后台的情况,但是由于浏览器的限制,不同域名之间的数据是不能互相访问的,那前端怎么和后端如何进行数据之间的交换呢? JavaScript由于安全性方面的考虑,不允许页面跨域调用其他页面的对象,那么问题来了,什么是跨域问题? 答:这是由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策略.那么什么是同源呢?所谓的同源是指三个方面"相同": 域名相同 协议相同 端口相同 下面就举几个例子来帮助更好的理解同源策略.

  • java 请求跨域问题解决方法实例详解

    java 请求跨域问题解决方法实例详解 新建Util类,在Util中添加下面方法: /* * response请求跨域公共设置 */ public static HttpServletResponse SetHttpServletResponse( HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(&qu

  • java使用webuploader实现跨域上传详解

    前言 项目中使用webuploader进行文件上传,需要用到跨域,查看webuploader的issues发现是支持上传的,但是他们写的回复都是不清不白的,有点迷糊:想了半天才知道咋回事,也可能是我比较笨,再次记录下java中详细的处理. webuploader进行上传,会执行2个请求:一个option请求,一个post(根据你的webuploader的配置method 值决定),需要在option请求中对响应头进行处理,post响应头也进行响应的处理. 以servlet为例: @WebServ

  • java实现后台图片跨域上传功能

    跨域的原因 在项目开发的过程中,我们经常需要用到图片上传操作,传统的做法是我们将其上传到项目的所在目录中,比如说项目的target目录中,但是由于项目在重启的过程中,target文件夹下的内容会被全部清空,这意味着如果采用这种方式,那么在测试环境与开发环境:在每一次的项目重启的过程中,我们经常会遭遇图片丢失的情况,这种情况有时往往很让人头疼,因而有一个图片服务器对于项目的开发和测试而言,这是十分必要的. 跨域的实现原理 在采用图片服务器的情况下,我们只需要像往常一样,由前台界面将图片上传到本地项

  • C#实现图片上传(PC端和APP)保存及 跨域上传说明

    A-PC端: 1-页面--multiple是控制单张还是多张图片上传 <input id="BusRoute" type="file" class="btn btn-default btn-lg" style="height:34px;padding-top:5px;padding-bottom:5px;" multiple /> 2-后台获取图片文件: HttpFileCollection pcFileColl

  • form+iframe解决跨域上传文件的方法

    (1)  jsp代码: <form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="bo

  • Java中使用COS实现文件上传功能

    cos是O'Rrilly公司开发的一款用于HTTP上传文件的OpenSource组件 需要cos.jar,下载地址:http://www.servlets.com/cos/ cos上传文件很简单,比fileupload还简单:但是上传最大我试了试,是800多兆,超过直接崩溃: java.io.IOException: Posted content length of 1627105576 exceeds limit of 889192448 --->byte,800多M 只需一个servelt即

  • jquery.uploadView 实现图片预览上传功能

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src=&quo

  • Java组件commons fileupload实现文件上传功能

    Apache提供的commons-fileupload jar包实现文件上传确实很简单,最近要用Servlet/JSP做一个图片上传功能,在网上找了很多资料,大多是基于struts框架介绍的,还有些虽然也介绍common-fileupload的上传,但是那些例子比较老,有些类现在都废弃了. 通过研究学习总结,终于完成了这个上传功能,下面与大家分享一下. 案例场景 一个图书馆后台管理界面,需要提供上传图书图片的功能并且最终显示在页面中. 实现效果 进入添加书籍页面,默认显示一个图片"暂无突破&qu

  • Java网络编程TCP实现文件上传功能

    本文实例为大家分享了Java网络编程TCP实现文件上传的具体代码,供大家参考,具体内容如下 上一篇博客,用网络编程TCP 实现聊天,这次实现文件上传. 客户端: package com.kuang.lesson02; import java.io.*; import java.net.InetAddress; import java.net.Socket; //客户端 public class TcpClientDemo2 { public static void main(String[] a

  • UEditor 编辑器跨域上传解决方法

    解决的方法: 1.在 ueditor\dialogs\internal.js 加入 document.domain = '根域名'; 2.在当前页面同样指定根域名: 复制代码 代码如下: <script type="text/javascript">    document.domain = "根域名";</script> 这样在 chrome.firefox 下没有问题,但在 ie 下还需要简单修改下 UEditor,在 editor.js

  • java Struts2框架下实现文件上传功能

    本文实例为大家分享了Struts2框架实现文件上传的方法,供大家参考,具体内容如下 struts2的配置过程 (1)在项目中加入jar包 (2)web.xml中filter(过滤器)的配置 <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:x

随机推荐