jquery+struts2图片上传以及图片压缩

上传图片基本上每个项目都会用到的一个功能，谈到上传图片就不得不谈图片压缩，毕竟如果用户上传比较大的图片的首先会比较占用内存，其次就是加载速度会慢很多，毕竟加载一个好几兆的图片可不是一下子就能加载出来的，这里前台上传图片用到“lrz”这个插件，这个插件主要是做上传图片前台压缩的，我这里图片压缩是在服务器端完成的，所以前台只有简单的上传图片和图片显示的操作，废话不多说了。直接上代码吧。
首先我们需要有一个按钮来触发上传图片的这个操作，因为我这里前台使用的MUI所以使用mui的onchange事件。

<input id="file" name="image" type="file" accept="image/*" />

基本上以下代码就可以实现前台上传图片以及图片显示的操作了。
其中“img.src”,就是你要展示图片的地址，你把这个传给别的img标签就可以显示你上传的图片了，这套上传图片适用于移动端和PC端，所以还是挺简单的。

     //上传图片
         document.querySelector('#file').addEventListener('change', function () {
          lrz(this.files[0], {width: 1024})
            .then(function (rst) {
                 // 把处理的好的图片给用户看看呗

            var img = new Image();
            img.src = rst.base64;

            img.onload = function () {
                //document.body.appendChild(img);
                $("#img1").attr("src",img.src);
            };
            $("#imgB").val("我已经获取到了图片");
            return rst;
           })
          .catch(function (err) {
            // 处理失败会执行
          })
        .always(function () {
            // 不管是成功失败，都会执行
         });
       });

前台基本上就那么多，接下来要说的是后台了，首先我还是要吐槽一下struts2真的是太不好用了，我这种用惯了springMVC的使用struts真的很不适应啊。
废话不多说，还是说代码吧，首先后台主要需要三个参数来对图片进行上传的操作。这里的image是你前台传递过来的，上面“input”上传图片里面的name值，发送form表单提交就可以在Action里面获取到，我这里是通过属性获取值的，在Action里面需要set/get方法才可以获取到，"imageFileName"和"imageContentType"是自动获取的，注意必须是这个名称才可以获取到。

//图片路径
    private File image;
    //图片名
    private String imageFileName;
    //图片类型
    private String imageContentType;

接下来就是重点对于图片的操作了，我这里对图片的操作使用的是一个google的开源库 Thumbnails ，自己去网上下载就可以了,也可以maven导入，

<dependency>
   <groupId>net.coobird</groupId>
   <artifactId>thumbnailator</artifactId>
   <version>0.4.8</version>
</dependency>

首先新建一个上传图片的工具类，UploadImg.java

import java.io.File;
import java.io.IOException;
import java.util.Date;
import net.coobird.thumbnailator.Thumbnails;

public class UploadImg {
    static String imgName; 
    public static String fileName = "C:/txihosServerFile/uploadImage/";
    public static String getImgName() {
        return imgName;
    }

    public static void setImgName(String imgName) {
        UploadImg.imgName = imgName;
    }

    //上传图片工具类  第一个参数（图片的本地路径），第二个参数（图片的名字），第三个参数（图片的类型主要包括.jpg,.png格式的图片等）
    public static String img(File image,String imageFileName,String imageContentType) throws IOException {
        //String realpath = ServletActionContext.getServletContext().getRealPath(fileName); 
        if(image != null){ 
            imgName =  new Date().getTime()+getExtention(imageFileName);
            System.out.println("路径地址："+fileName);
            File savefile = new File(new File(fileName), imgName);  
                if(savefile.getParentFile().exists()){  
                  
                savefile.getParentFile().mkdirs();  
                    
                Thumbnails.of(image).size(200, 300).toFile(savefile);
                }
        }  
     
        return imgName;
    }

    public static String getExtention(String fileName) {
        int pos = fileName.lastIndexOf(".");
        return fileName.substring(pos);
    }
}

基本上都在这里了，别看简单，但我们实现里图片的上传和图片的压缩以及图片的命名等操作，我这里返回了是图片的名字，这个名字保存到数据库里就可以了。我这里在Action是如下这样调用的。把这个返回的存储到一个bean里了，我这里是通过bean向数据库插入数据，这里的"imageFileName"和"imageContentType"就是我上面说的自动获取的，基本上对于上传图片的操作就这么多，其实还是挺简单的，这里面压缩还是挺给力的，上传的3M的图片压缩后只有45k所以还是挺好用的
图片读取首先上面上传的图片上传到硬盘上，通过tomcat磁盘映射访问我们的硬盘,在tomcat 下的 server.xml文件里面的<Host></Host>标签下添加如下配置 docBase我们硬盘的地址 path访问的名字

<Context docBase="C:/txihosServerFile/uploadImage" path="/uploadImage" debug="0" reloadable="true"></Context>

访问目录
服务器地址+path参数值+图片名字
如我的 path是 uploadImage ,那么我访问的地址就是
服务器地址+uploadImage+图片名字

 param.put("photo", UploadImg.img(image, imageFileName, imageContentType));