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>

        <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端图片压缩上传

以上是spring boot如何實現圖片的上傳和下載（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！