recherche

Maison >Java >javaDidacticiel >Comment Spring Boot implémente le téléchargement et le téléchargement d'images (code)

Comment Spring Boot implémente le téléchargement et le téléchargement d'images (code)

不言
不言original
2018-09-10 14:23:002944parcourir

本篇文章给大家带来的内容是关于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>

		<p>
			<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>-->
		</p>
		
		
		<p id="test">

		</p>
		
		<hr color="blanchedalmond"/>
		<p id="voicep">
			
		</p>
		
		<hr color="chartreuse" />
		<p id="imgp" style="width: 30%;height: 30%;">
			<img src="http://192.168.9.123:8860/v1/uploadDownload/downloadImage?imageName=123.JPG" style="width: 160px;height: 160px;"/>
		</p>
		
</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(&#39;WebSocket&#39; 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(&#39;MozWebSocket&#39; 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=&#39;red&#39;>" + evnt.data + "</font>)");
			console.log("onmessage----", evnt.data);
			//$("#test").html(evnt.data);
			$("#test").append(&#39;<p>&#39; + event.data + &#39;</p>&#39;);
		};
		websocket.onerror = function(evnt) {
			console.log("onerror----", evnt.data);
		}
		websocket.onclose = function(evnt) {
			console.log("onclose----", evnt.data);
		}
		$(&#39;#btn&#39;).on(&#39;click&#39;, function() {
			if(websocket.readyState == websocket.OPEN) {
				var msg = $(&#39;#id&#39;).val();
				//调用后台handleTextMessage方法
				websocket.send(msg);
			} else {
				alert("连接失败!");
			}
		});
		$(&#39;#disconnection&#39;).on(&#39;click&#39;, function() {
			if(websocket.readyState == websocket.OPEN) {
				websocket.close();
				//websocket.onclose();
				console.log("关闭websocket连接成功");
			}
		});
		$(&#39;#connection&#39;).on(&#39;click&#39;, 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 = $(&#39;#upload_file&#39;)[0].files[0];
        var fd = new FormData();
        //fd.append(&#39;uploadFile&#39;, pic);
        fd.append(&#39;file&#39;, 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");
            		$("#imgp").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;
    }

相关推荐：

如何实现上传图片和显示图片功能

spring mvc+localResizeIMG实现H5端图片压缩上传

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Analyse de l'utilisation du mot-clé transitoire en Java (code)Article suivant：Analyse de l'utilisation du mot-clé transitoire en Java (code)

Articles Liés

Voir plus