layui图片上传+java后台图片压缩

先导包

<dependency>

    <groupId>net.coobird</groupId>

    <artifactId>thumbnailator</artifactId>

    <version>0.4.8</version>

</dependency>

jsp

<div class="layui-upload layui-upload-zlht" style="padding-bottom:10px;">

    <div class="layui-upload-list">

        <table class="layui-table">

            <thead>

            <tr>

                <th colspan="3" style="text-align:center">房屋租赁合同照片</th>

            </tr>

            <tr>

                <th>序号</th>

                <th>预览</th>

                <th>操作</th>

            </tr>

            </thead>

            <tbody id="demoList1"></tbody>

            <tfoot>

            <tr>

                <th colspan="3" id="testList1" style="text-align:center">点击选择照片</th>

            </tr>

            </tfoot>

        </table>

    </div>

</div>

js

//多文件列表示例1

        var demoListView1 = $('#demoList1')

            , uploadListIns = upload.render({

            elem: '#testList1'

            , url: '<%=request.getContextPath()%>/dxh/dk/upload'

            , accept: 'file'//允许上传的文件类型

            , exts: 'jpg'

            , size: 10240//最大允许上传的文件大小kb

            , multiple: true

            , auto: false

            , bindAction: '#testListAction1'

            , choose: function (obj) {

                this.data = {"sqdh": sqdh};

                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

                $("#testListAction1").attr('data-status', '1');

                //读取本地文件

                obj.preview(function (index, file, result) {

                    var fileName = file.name;

                    var lastName = fileName.substr(fileName.lastIndexOf("."));

                    if (file.size > 200 * 1024) {

                        console.log(file.size + "大于200K，要压缩");

                        photoCompress(file, {

                            quality: 0.05,

                        }, function (base64Codes) {

                            var bl = convertBase64UrlToBlob(base64Codes);

                            obj.resetFile(index, bl, sqdh + (count++) + lastName);

                            console.log(bl)

                        });

                    }

                    //result:图片链接（base64）

                    var tr = $(['<tr id="upload-' + index + '">'

                        , '<td>' + index + '</td>'

                        , '<td><img class="layui-upload-img" src=' + result + '></td>'

//                        , '<td>等待上传</td>'

                        , '<td>'

//                        , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'

                        , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'

                        , '</td>'

                        , '</tr>'].join(''));

                    //单个重传

                    tr.find('.demo-reload').on('click', function () {

                        obj.upload(index, file);

                    });

                    //删除

                    tr.find('.demo-delete').on('click', function () {

                        delete files[index]; //删除对应的文件

                        tr.remove();

                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选

                    });

                    demoListView1.append(tr);

                });

            }

            , done: function (res, index, upload) {

                console.log(index);

                if (res.code == "200") { //上传成功

                    return delete this.files[index]; //删除文件队列已经上传成功的文件

                }

                this.error(index, upload);

            }

            , allDone: function (obj) { //当文件全部被提交后，才触发

                console.log('all done 2');

//                layer.msg("上传数量:" + obj.total + ",成功:" + obj.successful + ",失败:" + obj.aborted);

            }

        });

    });

java

public JsonResult upload(MultipartFile file, String sqdh) {

        if (file == null) {

            new JsonResult(FILE, "上传图片参数不合法");

        }

        if (file.getSize() > 5 * 1024 * 1024) {

            new JsonResult(FILE, "上传图片大小不能超过5M");

        }

        System.out.println("fileName：" + file.getOriginalFilename());

        System.out.println("fileSize：" + file.getSize());

        String realPath = PATH + sqdh;

        File paFile = new File(realPath);

        if (!paFile.exists()) {

            paFile.mkdirs();

        }

        File newFile = new File(realPath + "/" + file.getOriginalFilename());

        if (!newFile.exists()) {

            try {

                newFile.createNewFile();

            } catch (IOException e) {

                e.printStackTrace();

            }

}

        //通过CommonsMultipartFile的方法直接写文件（注意这个时候）

        try {

        try{

                // 先尝试压缩并保存图片

        //            Thumbnails.of(file.getInputStream())

        //                    //这个是缩放比例

        //                    .scale(0.5)

        //                    //这个是输出质量

        //                    .outputQuality(0.5)

        //                    .outputFormat("jpg")

        //                    .toFile(newFile);

        }catch(Exception e1){



        // 失败了再用springmvc自带的方式

                file.transferTo(newFile);

        }



            return new JsonResult("200", "success");

        } catch (Exception e) {

            e.printStackTrace();

        }

        return new JsonResult("400", "sorry");

    }