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

2025-05-29 0 48

这篇博客简单介绍下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\\

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

元宵节福利:

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

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 spring boot实现图片上传和下载功能 https://www.kuaiidc.com/112304.html

相关文章

发表评论
暂无评论