SpringBoot 异步实现图片上传预览下载

Sora33

已于 2022-11-01 15:43:33 修改

阅读量1.9k

点赞数 2

于 2022-02-16 21:06:44 首次发布

本文链接：https://blog.csdn.net/qq_40179653/article/details/122951828

版权

·前言

由于之前使用的是SSM框架,使用的是自己的Tomcat,换上SpringBoot之后Tomcat就成内置的了,继续用以前的方法上传都上传在了随机位置,研究了一下图片上传和预览写出来分享给大家

需要用到2个工具类(工具类也是从网上下载的),文末会附上工具类

首先我们要知道ajax上传需要的三个重要属性

cache: 默认值true 代表缓存当设置为false的时候,再次发送请求,读的是浏览器的数据而不是之前缓存在浏览器中的数据可以保证每次都是新的数据
processData: 是否序列化数据,默认值是true 代表将数据序列化,这里我们上传文件设置为false
contentType: 默认值application/x-www-form-urlencoded 是设置我们发送给服务器的数据格式，而常用的dataType则是设置我们收到服务器数据的格式

先来看一下前台页面,一个简单的上传图片按钮和一个下载按钮 js中是对应的函数

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <link rel="stylesheet" href="../static/css3/css.css">
    <script src="../static/js/jquery-1.8.3.js"></script>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
</head>
<body>
    <table>
        <tr>
            <td>
                图片上传
                <input type="file" id="photo" onchange="upPic()">
                <img src="" alt="" id="img" width="135px">
                <input type="hidden" id="photoPath">
                <input type="button" value="下载图片" onclick="downloadPhoto()">
            </td>
        </tr>
    </table>
</body>
<script>

    // 上传图片
    function upPic() {
        var fd = new FormData();
        fd.append("file",$("#photo").get(0).files[0])
        $.ajax({
            type: "post",
            url: "/user/upPic",
            data: fd,
            cache: false,
            processData: false,
            contentType: false,
            success (res) {
                // 赋值给img的src属性 实现预览图片
                $("#img").prop("src","/user/showImg?path="+res+"")
                // 将图片路径赋值给一个属性
                $("#photoPath").val(res)
            }
        })
    }


    // 下载图片
    function downloadPhoto() {
       location = "/user/download?path="+$("#photoPath").val();
    }

</script>
</html>

一、上传图片

代码非常简单,我们只需要将file传到前台交给工具类处理返回String类型的图片路径例D:/upload/2022021304222829e665e4482786fdcfaafd1af14be9a0.jpg

(注:这个工具类需要自行在D盘创建upload文件夹)

  /**
     * 上传图片
     * @param multipartFile
     * @return
     */
    @RequestMapping("/upPic")
    @ResponseBody
    public String upPic(@RequestParam("file")MultipartFile multipartFile, HttpSession session) {
        return FileUploadUtils.upload(multipartFile, session);
    }

上传图片的工具类中我们可以看到先设置一个默认路径,之后对上传的文件进行后缀名校验，之后使用UUID随机生成字符串上传到默认路径

public static String upload(MultipartFile photo,HttpSession session) {
		String realPath ="";
		try {
			if(!photo.isEmpty()) {
				//String realPath = session.getServletContext().getRealPath("D:\\workspace\\upload\\");
				 realPath = "D:/upload/";

				//��ȡ�ļ���ԭʼ����
				String originalFilename = photo.getOriginalFilename();

				if(originalFilename.endsWith(".png")||originalFilename.endsWith(".jpg")||originalFilename.endsWith(".jpeg")||originalFilename.endsWith(".mp4")) {
					String replace = UUID.randomUUID().toString().replace("-", "");

//					SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMddhhmmss");
//					String replace = dateFormat.format(new Date());

					String filename = replace+originalFilename;
					File file = new File(realPath,filename);
					photo.transferTo(file);
					realPath += filename;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return realPath;

二、展示图片

在前台将图片中的src属性设置为调用后台的showImg方法

 /**
     * 展示图片
     * @param path
     * @param response
     */
    @RequestMapping("/showImg")
    public void showImg(String path, HttpServletResponse response) {
        FileUploadUtils.showImg(path, response);
    }

// 赋值给img的src属性 实现预览图片
$("#img").prop("src","/user/showImg?path="+res+"")

通过IO流的方式读取路径上的图片

public static void showImg(String path, HttpServletResponse response){
		if(path!=null&&!path.equals("")){

			try {
				FileInputStream fis = new FileInputStream(path);
				ServletOutputStream os = response.getOutputStream();

				byte [] b = new byte[1024*8];
				while(fis.read(b)!=-1){
					os.write(b);
				}
			} catch (FileNotFoundException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

三、下载图片

调用FileDownLoad图片下载工具类,使用IO流下载到浏览器默认目录

/**
     * 下载图片
     * @param path
     * @param response
     */
    @RequestMapping("/download")
    public void download(String path, HttpServletRequest request, HttpServletResponse response) {
        try {
            FileDownLoad.download(path, request, response)
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

两个工具类 :

图片上传工具类

package com.sora.utils;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.UUID;

public class FileUploadUtils {
	
	
	public static String upload(MultipartFile photo,HttpSession session) {
		String realPath ="";
		try {
			if(!photo.isEmpty()) {
				//String realPath = session.getServletContext().getRealPath("D:\\workspace\\upload\\");
				 realPath = "D:/upload/";

				//��ȡ�ļ���ԭʼ����
				String originalFilename = photo.getOriginalFilename();

				if(originalFilename.endsWith(".png")||originalFilename.endsWith(".jpg")||originalFilename.endsWith(".jpeg")||originalFilename.endsWith(".mp4")) {
					String replace = UUID.randomUUID().toString().replace("-", "");

//					SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMddhhmmss");
//					String replace = dateFormat.format(new Date());

					String filename = replace+originalFilename;
					File file = new File(realPath,filename);
					photo.transferTo(file);
					realPath += filename;
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return realPath;
	}

	public static void showImg(String path, HttpServletResponse response){
		if(path!=null&&!path.equals("")){

		try {
			FileInputStream fis = new FileInputStream(path);
			ServletOutputStream os = response.getOutputStream();

			byte [] b = new byte[1024*8];
			while(fis.read(b)!=-1){
				os.write(b);
			}
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
		}
	}

}

图片下载工具类

package com.sora.utils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;

public class FileDownLoad {

	public static String download(String filepath,HttpServletRequest request, HttpServletResponse response) throws Exception{

		BufferedInputStream bis = null;
		BufferedOutputStream bos = null;
		OutputStream fos = null;
		InputStream fis = null;

		try {
			//String filepath = request.getRealPath(filepatha);
			//String filepathall = request.getSession().getServletContext().getRealPath(filepath);

			File uploadFile = new File(filepath);

			fis = new FileInputStream(uploadFile);
			bis = new BufferedInputStream(fis);
			fos = response.getOutputStream();
			bos = new BufferedOutputStream(fos);

			String filename = filepath.substring(filepath.lastIndexOf("\\")+1);

			response.setHeader("Content-disposition", "attachment;filename="+ URLEncoder.encode(filename, "utf-8"));

			int bytesRead = 0;
			byte[] buffer = new byte[8192];
			while ((bytesRead = bis.read(buffer, 0, 8192)) != -1) {
				bos.write(buffer, 0, bytesRead);
			}

		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		} catch (NumberFormatException e) {
			e.printStackTrace();
		} finally {
			try {
				if (bos != null) {
					bos.flush();
				}
				if (fis != null) {
					fis.close();
				}
				if (bis != null) {
					bis.close();
				}
				if (fos != null) {
					fos.close();
				}
				if (bos != null) {
					bos.close();
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return null;
	}
}

更多知识请移步个人博客：33sora.com

Sora33

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot 异步实现图片上传预览下载

由于之前使用的是SSM框架,使用的是自己的Tomcat,换上SpringBoot之后Tomcat就成内置的了,继续用以前的方法上传都上传在了随机位置,研究了一下图片上传和预览写出来分享给大家
复制链接

扫一扫