首页 > 编程 > Java > 正文

spring boot实现图片上传和下载功能

2019-11-26 10:13:36
字体:
来源:转载
供稿:网友

 这篇博客简单介绍下spring boot下图片上传和下载,已经遇到的问题。首先需要创建一个spring boot项目。

1、核心的controller代码

package com.qwrt.station.websocket.controller;  import com.alibaba.fastjson.JSONObject; import com.qwrt.station.common.util.JsonUtil; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile;  import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*;  /**  * Created by jack on 2017/10/30.  */ @RestController @RequestMapping("v1/uploadDownload") public class UploadDownloadController {  private static final Logger logger = LoggerFactory.getLogger(UploadDownloadController.class);  @Value("${uploadDir}")  private String uploadDir;   @RequestMapping(value = "/uploadImage", method = RequestMethod.POST)  public JSONObject uploadImage(@RequestParam(value = "file") MultipartFile file) throws RuntimeException {  if (file.isEmpty()) {   return JsonUtil.getFailJsonObject("文件不能为空");  }  // 获取文件名  String fileName = file.getOriginalFilename();  logger.info("上传的文件名为:" + fileName);  // 获取文件的后缀名  String suffixName = fileName.substring(fileName.lastIndexOf("."));  logger.info("上传的后缀名为:" + suffixName);  // 文件上传后的路径  String filePath = uploadDir;  // 解决中文问题,liunx下中文路径,图片显示问题  // fileName = UUID.randomUUID() + suffixName;  File dest = new File(filePath + fileName);  // 检测是否存在目录  if (!dest.getParentFile().exists()) {   dest.getParentFile().mkdirs();  }  try {   file.transferTo(dest);   logger.info("上传成功后的文件路径未:" + filePath + fileName);   return JsonUtil.getSuccessJsonObject(fileName);  } catch (IllegalStateException e) {   e.printStackTrace();  } catch (IOException e) {   e.printStackTrace();  }  return JsonUtil.getFailJsonObject("文件上传失败");  }   //文件下载相关代码  @RequestMapping(value = "/downloadImage",method = RequestMethod.GET)  public String downloadImage(String imageName,HttpServletRequest request, HttpServletResponse response) {  //String fileName = "123.JPG";  logger.debug("the imageName is : "+imageName);  String fileUrl = uploadDir+imageName;  if (fileUrl != null) {   //当前是从该工程的WEB-INF//File//下获取文件(该目录可以在下面一行代码配置)然后下载到C://users//downloads即本机的默认下载的目录   /* String realPath = request.getServletContext().getRealPath(    "//WEB-INF//");*/   /*File file = new File(realPath, fileName);*/   File file = new File(fileUrl);   if (file.exists()) {   response.setContentType("application/force-download");// 设置强制下载不打开   response.addHeader("Content-Disposition",    "attachment;fileName=" + imageName);// 设置文件名   byte[] buffer = new byte[1024];   FileInputStream fis = null;   BufferedInputStream bis = null;   try {    fis = new FileInputStream(file);    bis = new BufferedInputStream(fis);    OutputStream os = response.getOutputStream();    int i = bis.read(buffer);    while (i != -1) {    os.write(buffer, 0, i);    i = bis.read(buffer);    }    System.out.println("success");   } catch (Exception e) {    e.printStackTrace();   } finally {    if (bis != null) {    try {     bis.close();    } catch (IOException e) {     e.printStackTrace();    }    }    if (fis != null) {    try {     fis.close();    } catch (IOException e) {     e.printStackTrace();    }    }   }   }  }  return null;  }   } 

     上面的代码有两个方法,上面的方法是图片上传的方法,下面的方法是图片下载的方法。下载图片需要传入图片的文件名,在ios,android手机,谷歌浏览器测试,上传下载没有问题。

2、测试的html的核心代码如下,进行图片的上传和下载:

<!DOCTYPE html> <html>   <head>  <meta charset="UTF-8" />  <title>websocket chat</title>  </head>   <body>   <div>   <label>输入信息:</label><input id="id" width="100px" /><br />   <button id="btn">发送消息</button>   <button id="connection">websocket连接</button>   <button id="disconnection">断开websocket连接</button>   <br /><br />   <form enctype="multipart/form-data" id="uploadForm">   <input type="file" name="uploadFile" id="upload_file" style="margin-bottom:10px;">   <input type="button" id="uploadPicButton" value="上传" onclick="uploadImage()">   </form>   <!--<input type="file" onchange="uploadImgTest();" id="uploadImg" name="uploadImg" />   <button id="uploadImage" onclick="uploadImage();">上传</button>-->  </div>      <div id="test">   </div>    <hr color="blanchedalmond"/>  <div id="voiceDiv">    </div>    <hr color="chartreuse" />  <div id="imgDiv" style="width: 30%;height: 30%;">   <img src="http://192.168.9.123:8860/v1/uploadDownload/downloadImage?imageName=123.JPG" style="width: 160px;height: 160px;"/>  </div>   </body>   <script src="js/jquery-3.2.1.min.js"></script>  <!--<script th:src="@{stomp.min.js}"></script>-->  <script src="js/sockjs.min.js"></script>   <script>  var websocketUrl = "ws://192.168.9.123:8860/webSocketServer";  var websocket;  if('WebSocket' in window) {   //websocket = new WebSocket("ws://" + document.location.host + "/webSocketServer");   //websocket = new WebSocket("ws://192.168.9.123:9092/webSocketServer");   //websocket = new WebSocket("ws://localhost:8860/webSocketServer");   websocket = new WebSocket(websocketUrl);  } else if('MozWebSocket' in window) {   websocket = new MozWebSocket("ws://" + document.location.host + "/webSocketServer");  } else {   websocket = new SockJS("http://" + document.location.host + "/sockjs/webSocketServer");  }  websocket.onopen = function(evnt) {   console.log("onopen----", evnt.data);  };  websocket.onmessage = function(evnt) {   //$("#test").html("(<font color='red'>" + evnt.data + "</font>)");   console.log("onmessage----", evnt.data);   //$("#test").html(evnt.data);   $("#test").append('<div>' + event.data + '</div>');  };  websocket.onerror = function(evnt) {   console.log("onerror----", evnt.data);  }  websocket.onclose = function(evnt) {   console.log("onclose----", evnt.data);  }  $('#btn').on('click', function() {   if(websocket.readyState == websocket.OPEN) {   var msg = $('#id').val();   //调用后台handleTextMessage方法   websocket.send(msg);   } else {   alert("连接失败!");   }  });  $('#disconnection').on('click', function() {   if(websocket.readyState == websocket.OPEN) {   websocket.close();   //websocket.onclose();   console.log("关闭websocket连接成功");   }  });  $('#connection').on('click', function() {   if(websocket.readyState == websocket.CLOSED) {   websocket.open();   //websocket.onclose();   console.log("打开websocket连接成功");   }  });  //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  window.onbeforeunload = function() {   websocket.close();  }   function uploadImgTest() {     }    function uploadImage(){   //var uploadUrl = "http://localhost:8860/v1/uploadDownload/uploadImage";  var uploadUrl = "http://192.168.9.123:8860/v1/uploadDownload/uploadImage";  var downUrl = "http://192.168.9.123:8860/v1/uploadDownload/downloadImage"  var pic = $('#upload_file')[0].files[0];  var fd = new FormData();  //fd.append('uploadFile', pic);  fd.append('file', pic);  $.ajax({   url:uploadUrl,   type:"post",   // Form数据   data: fd,   cache: false,   contentType: false,   processData: false,   success:function(data){   console.log("the data is : {}",data);   if(data.code == 0){    console.log("上传成功后的文件路径为:"+data.data);    var img = $("<img />")    img.attr("src",downUrl+"?imageName="+data.data);    img.width("160px");    img.height("160px");    $("#imgDiv").append(img);   }      }  });    }    </script>  </html> 

上面的代码有些和图片的上传和下载没有关系,根据需要自己去掉,看图片上传和下载的核心代码,需要引入jquery。

3、spring boot的属性配置:

1.解决图片上传太大的问题:

spring: http: multipart: max-file-size: 100Mb #文件上传大小 max-request-size: 200Mb #最打请求大小

这是新版spring boot解决图片或者文件上传太大的问题,老板的不是这样解决的。可以自己查资料

2.配置文件上传保存的位置:

#上传位置uploadDir: F:/mystudy/pic/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

元宵节福利:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表