图片上传

 

controller层引入上传图片所需的java类。

import org.springframework.web.multipart.MultipartFile;

 编写上传代码部分

 @PostMapping("/imageUpload")
    public ResultData uploadImg(MultipartFile file) {
        /*判断文件是否存在*/
        if (file.isEmpty()) {
            return ResultData.notFound();
        }
        /*获取图片名*/
        String fileName = file.getOriginalFilename();
        /*指定文件上传目录   SystemConstants.FILE_PATH为自己声明的一个类，包括静态常量  参考如下SystemConstants类的声明*/
        String filePath = SystemConstants.FILE_PATH;
        /*实例化目录对象dest*/
        File dest = new File(filePath + fileName);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            /*若不存在使用mkdir()创建目录*/
            dest.getParentFile().mkdirs();
        }
        try {
            /*是springmvc封装的方法，用于图片上传时，把内存中图片写入磁盘*/
            file.transferTo(dest);
            String image = SystemConstants.FILE_SAVE_PRIFIX + fileName;
            /*获取上传图片的宽和高  ImageUtil 为自己编写的获取图片宽和高的工具类  参考如下ImageUtil类的编写  */
            int []size = ImageUtil.getImageSize(dest.getAbsolutePath());
            int width = size[0];
            int height = size[1];
            return ResultData.ok().putDataValue("image", image).putDataValue("width", width).putDataValue("height", height);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return ResultData.notFound();
    }

SystemConstants声明静态常量

public class SystemConstants {

    public static String FILE_PATH = "E:/ISiteImg/";

    public static String FILE_SAVE_PRIFIX = "/ISiteImg/";

   }

ImageUtil  获取图片宽和高的工具类

package com.touchspring.isite.base.utils;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Arrays;

/**
 * 获取图片大小工具类
 *
 * @author Victor
 */
public class ImageUtil {

    private static String DEFAULT_PREVFIX = "thumb_";
    private static Boolean DEFAULT_FORCE = false;

    /**
     * <p>Title: thumbnailImage</p>
     * <p>Description: 根据图片路径生成缩略图 </p>
     *
     * @param w       缩略图宽
     * @param h       缩略图高
     * @param prevfix 生成缩略图的前缀
     * @param force   是否强制按照宽高生成缩略图(如果为false，则生成最佳比例缩略图)
     */
    public static void thumbnailImage(File imgFile, int w, int h, String prevfix, boolean force, String thumbPath) {
        if (imgFile.exists()) {
            try {
                // ImageIO 支持的图片类型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]
                String types = Arrays.toString(ImageIO.getReaderFormatNames());
                String suffix = null;
                // 获取图片后缀
                if (imgFile.getName().indexOf(".") > -1) {
                    suffix = imgFile.getName().substring(imgFile.getName().lastIndexOf(".") + 1);
                }// 类型和图片后缀全部小写，然后判断后缀是否合法
                if (suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()) < 0) {
                    return;
                }
                Image img = ImageIO.read(imgFile);
                if (!force) {
                    // 根据原图与要求的缩略图比例，找到最合适的缩略图比例
                    int width = img.getWidth(null);
                    int height = img.getHeight(null);
                    if ((width * 1.0) / w < (height * 1.0) / h) {
                        if (width > w) {
                            h = Integer.parseInt(new java.text.DecimalFormat("0").format(height * w / (width * 1.0)));
                        }
                    } else {
                        if (height > h) {
                            w = Integer.parseInt(new java.text.DecimalFormat("0").format(width * h / (height * 1.0)));
                        }
                    }
                }
                BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
                Graphics g = bi.getGraphics();
                g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null);
                g.dispose();
                String p = imgFile.getPath();
                // 将图片保存在原目录并加上前缀
                if (thumbPath != null) {
                    ImageIO.write(bi, suffix, new File(thumbPath));
                } else {
                    ImageIO.write(bi, suffix, new File(p.substring(0, p.lastIndexOf(File.separator)) + File.separator + prevfix + imgFile.getName()));
                }
            } catch (IOException e) {
            }
        } else {
        }
    }

    public void thumbnailImage(String imagePath, int w, int h, String prevfix, boolean force, String thumbPath) {
        File imgFile = new File(imagePath);
        thumbnailImage(imgFile, w, h, prevfix, force, thumbPath);
    }

    public void thumbnailImage(String imagePath, int w, int h, boolean force, String thumbPath) {
        thumbnailImage(imagePath, w, h, DEFAULT_PREVFIX, force, thumbPath);
    }

    public void thumbnailImage(String imagePath, int w, int h, String thumbPath) {
        thumbnailImage(imagePath, w, h, DEFAULT_FORCE, thumbPath);
    }

    /**
     * 获取图片大小
     *
     * @param imagePath
     * @return [0]:width [1]:height
     */
    public static int[] getImageSize(String imagePath) {
        int[] size = new int[2];
        File picture = new File(imagePath);
        BufferedImage sourceImg = null;
        try {
            sourceImg = ImageIO.read(new FileInputStream(picture));
        } catch (IOException e) {
            e.printStackTrace();
        }
        size[0] = sourceImg.getWidth();
        size[1] = sourceImg.getHeight();
        return size;
    }

    public static void main(String[] args) {
//        new ImageUtil().thumbnailImage("E:\\TS\\DT/13$CAMERA$20171211161000.png", 120, 90,"E:\\TS\\DT/22.png");
    }
}

前台表格显示部分

                 <el-table-column
                        prop="image"
                        label="底图"
                        sortable
                        text-align="center">
                    <template slot-scope="scope">
                        <img style="width: 50px;height: 51px;cursor:pointer"
                             :src="'/api'+ scope.row.image"/>
                    </template>
                </el-table-column>

对话框上传部分

                    <el-form-item label="上传底图" prop="image">
                        <el-upload
                                ref="uploadRef"
                                class="avatar-uploader"
                                action="/api/imageUpload"
                                :auto-upload="true"
                                :show-file-list="false"
                                :on-success="handleImageSuccess">
               <img v-if="form.data.image"  :src="'/api'+ form.data.image" class="avatar">
                            <i v-else class="avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

 上传成功后为表单赋值

function handleImageSuccess(res) {
		if (res.code === 1200) {
			this.form.data.image = res.data.image;
			this.form.data.width = res.data.width;
			this.form.data.height = res.data.height;


			console.log("---width=="+ res.data.width + "--height-" + res.data.height );
		}
	}