圖片上傳

 

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 );
		}
	}