服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|易语言|

服务器之家 - 编程语言 - JAVA教程 - spring boot实现图片上传和下载功能

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

2021-04-08 14:28修炼中的菜鸟 JAVA教程

这篇文章主要为大家详细介绍了spring boot实现图片上传和下载功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

1、核心的controller代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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的核心代码如下,进行图片的上传和下载:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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.解决图片上传太大的问题:

?
1
2
3
4
5
spring:
 http:
 multipart:
 max-file-size: 100Mb #文件上传大小
 max-request-size: 200Mb #最打请求大小

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

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

?
1
2
#上传位置
uploadDir: F:\mystudy\pic\

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

元宵节福利:

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

 

原文链接:http://blog.csdn.net/j903829182/article/details/78406778

延伸 · 阅读

精彩推荐