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

              这篇博客简单介绍下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="上传" οnclick="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;
    }




©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页