这篇博客简单介绍下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" οnchange="uploadImgTest();" id="uploadImg" name="uploadImg" />
-
<button id="uploadImage" οnclick="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:
http:
multipart:
max-file-size: 100Mb #文件上传大小
max-request-size: 200Mb #最打请求大小
这是新版spring boot解决图片或者文件上传太大的问题，老板的不是这样解决的。可以自己查资料
2,配置文件上传保存的位置：
#上传位置
uploadDir: F:\mystudy\pic\
spring boot多文件上传：
核心代码：
-
/**
-
* 多文件上传
-
* @param files
-
* @return
-
* @throws RuntimeException
-
*/
-
@RequestMapping(value =
"/uploadFiles", method = RequestMethod.POST)
-
public JSONObject uploadFiles(@RequestParam(value = "file") MultipartFile[] files){
-
StringBuffer result =
new StringBuffer();
-
try {
-
for (
int i =
0; i < files.length; i++) {
-
if (files[i] !=
null) {
-
//调用上传方法
-
String fileName = executeUpload(files[i]);
-
result.append(fileName+
";");
-
}
-
}
-
}
catch (Exception e) {
-
e.printStackTrace();
-
JsonUtil.getFailJsonObject(
"文件上传失败");
-
}
-
return JsonUtil.getSuccessJsonObject(result.toString());
-
}
-
-
/**
-
* 提取上传方法为公共方法
-
* @param file
-
* @return
-
* @throws Exception
-
*/
-
private String executeUpload(MultipartFile file)throws Exception{
-
//文件后缀名
-
String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(
"."));
-
//上传文件名
-
String fileName = UUID.randomUUID()+suffix;
-
//服务端保存的文件对象
-
File serverFile =
new File(uploadDir + fileName);
-
// 检测是否存在目录
-
if (!serverFile.getParentFile().exists()) {
-
serverFile.getParentFile().mkdirs();
-
}
-
//将上传的文件写入到服务器端文件内
-
file.transferTo(serverFile);
-
return fileName;
-
}
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
