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\
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.정월대보름 혜택:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
thymeleaf로 HTML 페이지를 동적으로 만듭니다 (spring + gradle)지난번에는 에서 화면에 HTML을 표시했습니다. 이번에는 화면을 동적으로 움직여보고 싶기 때문에 입력한 문자를 화면에 표시시키고 싶습니다. 초보자의 비망록이므로 이상한 점 등 있으면 지적 받을 수 있으면 기쁩니다! ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.