前端展示后台服务器中图片的功能实现

Vue+Springboot

这里的按钮我是放在了table表格的末尾，目的是获取每一行中的批次号，然后根据批次号读取后台服务器的图片，并且展示在前端的dialog中。

 <el-table-column align="center" label="操作" width="211">
            <template slot-scope="scope">
              <el-button type="primary" class="el-icon-" @click="handleDisplayInformation(scope.row)">查看图片
              </el-button>
            </template>
          </el-table-column>

效果图片：

 dialog部分的代码

  <el-dialog
        title="展示测试信息"
        :visible.sync="pictureView"
        width="1000px"
        class="dialogLand"
        append-to-body
    >
      <img :src="imgSrc" alt="Sorry，图片暂时还未生成哦">
    </el-dialog>


data(){
    return{
        imgSrc: '',
        pictureView: false,

}


}

上述两个方法的代码

 handleDisplayInformation(row) {
      this.pictureView = true;
      this.getImg(row) //将这一行的所有信息传递到getImg方法中，
    },
    
    getImg(row) {
      return axios({
        url: 'http://localhost:8888/WES/getImg',
        method: 'get',
        params: {name: row.picihao}, //使用这一行信息中的批次号信息
      }).then(res => {
        if(res.data.code === '200'){
          this.imgSrc = res.data.data
        }else {
   
          this.imgSrc = null //如果不写这个，那点击不存在的图片的时候，显示的还是刚刚收到的图片
        }
      }).catch((error) =>{
        console.log(error + "errrrrrror")
      })
    },

有图片的效果图，这里只是做了个测试，图片的大小暂时还未调整

 后台服务器无图片的效果图：

 后端部分：

主要是一个接口还有个工具类，代码如下

    @GetMapping("/getImg")
    public  Result getImg(String name){

        System.out.println("获取图片数据");
        System.out.println(name + "name+++++++++++++++++++++++++++");
        String path = "D:\\" + name + ".jpg";
        File file = new File(path);
        if (!file.exists()){
            System.out.println("图片他不存在啊，应该是还没有生成呢");
            return Result.error();
        }else {
            String base64 = ImgToBase64Util.readPath("D:\\" + name + ".jpg");
//        String base64 = ImgToBase64Util.readPath("/home/SpringbootAndVue/img/" + name + ".jpg");
            return Result.success(base64);
        }

    }

工具类：

import cn.hutool.core.io.FileTypeUtil;
import cn.hutool.core.io.FileUtil;

import java.io.File;
import java.util.Base64;

public class ImgToBase64Util {
  public static String readPath(String filePath) {
    File file = new File(filePath);
    if (!file.exists()) {
      throw new IllegalArgumentException("这个图片" + filePath + "没有生成!");
    }
    byte[] bytes = FileUtil.readBytes(file);
    String base64EncodedContent = Base64.getEncoder().encodeToString(bytes);
    String type = FileTypeUtil.getType(file);

    String mimeType;
    switch (type) {
      case "jpg":
      case "jpeg":
        mimeType = "image/jpeg";
        break;
      case "png":
        mimeType = "image/png";
        break;
      case "gif":
        mimeType = "image/gif";
        break;
      case "tif":
        mimeType = "image/tiff";
        break;
      case "bmp":
        mimeType = "image/bmp";
        break;
      default:
       
        mimeType = "application/octet-stream";
    }
    return "data:" + mimeType + ";base64," + base64EncodedContent;
  }


  /**
   * 图片转base64 
   */
  public static String readPathNoHeader(String filePath) {
    File file = new File(filePath);
    if (!file.exists()) {
      throw new IllegalArgumentException("这个图片" + filePath + "不存在!");
    }
    byte[] bytes = FileUtil.readBytes(file);
    return Base64.getEncoder().encodeToString(bytes);
  }
}