图片上传以及图片的压缩

导入的依赖：

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

相关的前端代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui文件上传示例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/lib/layui/css/layui.css}">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">选择图片</button> <button type="button" class="layui-btn" id="btn">上传图片</button>
    <div class="layui-upload-list">
        <img style="width: 200px;height: 100px" id="demo1">
    </div>
</div>


<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['upload','jquery'], function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/headImg/submit'
            ,auto: false
            ,bindAction: "#btn"
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.state > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                layer.msg('上传成功');
            }
        });
    });
</script>

</body>
相关的接口：
@RequestMapping(value = "/headImg/submit", method = RequestMethod.POST)
@ResponseBody
public JsonResult uploadFile(MultipartFile file, HttpServletRequest request) {
    if(file == null ){
        return new JsonResult(JsonResult.ERROR, "file不能为空");
    }

    if (file.getSize() >= 50*1024*1024)
    {
        return new JsonResult(JsonResult.ERROR, "文件不能大于50M");
    }
    String filePath = "D:/uploadFile/";//原文件上传到这个文件夹
    String thumbnailImgPath =  "D:/uploadFile/thumbnailImg/"; //缩略图的文件上传到这个文件夹
    String fileName = file.getOriginalFilename().trim();
    if(fileName.contains(".png")||fileName.contains(".bmp")){
        fileName = fileName.replace(".png", ".jpg");
        fileName = fileName.replace(".bmp", ".jpg");
    }
    //创建原文件文件夹
    File file1 = new File(filePath);
    if (!file1.exists()) {
        file1.mkdirs();
    }
    //创建原文件
    String finalFilePath = filePath + fileName;
    File desFile = new File(finalFilePath);
    if (desFile.exists()) {
        desFile.delete();
    }
    //创建缩略图文件文件夹
    File file2 = new File(thumbnailImgPath);
    if (!file2.exists()) {
        file2.mkdirs();
    }
    //创建缩略图文件
    String finalThumbnailImgPath = thumbnailImgPath + fileName;
    File desThumbnailImg= new File(finalThumbnailImgPath);
    if (desThumbnailImg.exists()) {
        desThumbnailImg.delete();
    }
    try {
        file.transferTo(desFile);
        long size = file.getSize();
        double scale = 1.0d ;
        if(size >= 200*1024){
            if(size > 0){
                scale = (200*1024f) / size  ;
            }
        }
        if(size < 200*1024){
            Thumbnails.of(desFile).scale(1f).outputFormat("jpg").toFile(desThumbnailImg);
        }else{
            Thumbnails.of(desFile).scale(1f).outputQuality(scale).outputFormat("jpg").toFile(desThumbnailImg);
        }
    } catch (Exception e) {
        System.out.println(e.getMessage());
        return new JsonResult(JsonResult.ERROR, JsonResult.FMSG);
    }
    return new JsonResult(JsonResult.SUCCESS, JsonResult.TMSG);
}
 
此文章参考地址为：https://www.cnblogs.com/miskis/p/5500822.html
posted @ 2022-01-11 14:00  올드보이  阅读(75)  评论(0)    收藏  举报