SpringBoot 图片上传 记录开发美好生活

SpringBoot 图片上传

记录一下图片上传踩过的坑🕳
本文前台配合vue+elementui实现效果

后台篇

由于存储空间和前台获取效率问题，需要对图片进行压缩

1.Maven 导包

<!-- 图片压缩 -->
<dependency>
   <groupId>net.coobird</groupId>
   <artifactId>thumbnailator</artifactId>
   <version>0.4.8</version>
</dependency>

2. SpringBoot 配置

这里呢就是要注意空格，SpringBoot的核心配置文件对空格的要求十分严格

以下主要写了静态资源的访问、文件上传的大小限制（SpringBoot 2.x）、存入图片（文件）的地址

因为上传的图片是真实的，存储在本地。如果部署在服务器上，需要更改yml的地址

application.yml

spring:
	resources:
    	static-locations: classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${prop.upload-folder}
    servlet:
    	multipart:
      		max-file-size: 20MB
      		max-request-size: 100MB
prop:
	# Linux
	# upload-folder: /root/project
	# Windows
	upload-folder: F:/Image

3. 控制层的编写

UploadController.java

Msg 是一个返回的信息类，文中调用Msg中success和fail方法

	@Value("${prop.upload-folder}")
    private String setPath;

    @PostMapping("/fileUpload")
    public Msg fileUpload(@RequestParam("file") MultipartFile file){
        /* 根据日期将文件夹分类 */
        SimpleDateFormat date = new SimpleDateFormat("yyyyMMdd");
        String newDir = date.format(new Date())+"/";
        /* 文件存放位置 */
        String newPath = "/upload/";
        String uploadPath = setPath+ newPath + newDir;
        /* 响应文件路径 */
        String resPath = newPath+newDir;
        if(file.isEmpty()){
            return new Msg().fail("上传失败！");
        }
        /* 获取上传文件名 */
        String fileName = file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
        String name = String.valueOf(System.currentTimeMillis()) +"."+suffix;
        /*创建文件*/
        File saveFile = new File(uploadPath, name);
        //判断文件父目录是否存在
        if(!saveFile.getParentFile().exists()){
            saveFile.getParentFile().mkdirs();
            System.out.println(saveFile.getParentFile().getAbsolutePath());
        }
        try {
        	/* 获取图片信息（width，height）防止图片变形失真（虽然压缩后失真必不可免） */
            BufferedImage read = ImageIO.read(file.getInputStream());
            //压缩图片后保存
            Thumbnails.of(file.getInputStream())
                    .size(read.getWidth(),read.getHeight())
                    .toFile(saveFile.getPath());
            Msg msg = new Msg().success("上传成功！");
            /* 返回图片地址 */
            msg.getExtend().put("imgUrl",resPath+name);
            return msg;
        } catch (IllegalStateException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return new Msg().fail("上传失败！");
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return new Msg().fail("上传失败！");
        }
    }

---

前台篇

直接上代码！！

1. html

action为后端上传接口

<!--element上传组件-->
<el-upload
    class="avatar-uploader"
    action="http://39.99.143.47:8081/fileUpload"
    :before-upload="beforeAvatarUpload"
    :on-success="uploadSuccess">
    <i class="el-icon-plus"></i>
</el-upload>
<!--返回数据-->
<el-image :src="imgUrl"></el-image>

2. js

export default {
	data() {
	    return{
	    	/* 返回图片地址 */
	        imgUrl: '',
	    }
	}
    methods: {
        /*上传前的拦截*/
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
    	/* 上传成功的钩子 */
        uploadSuccess(response) {
    		/* 上传成功返回的地址 */
            console.log(response)
            this.imgUrl = 'http://39.99.143.47:8081'+ response.extend.imgUrl
        }
    }
}

踩过的坑真的太多了，记录这个正确方式！