element ui table 获取图片（前端+后端全实现）

先上效果图

整体的逻辑是，在数据库中用blob类型存储图片，当mybatis获取到blob类型用byte[]来接收，此时自动转换为了图片的base64形式，再将整条数据以json的形式发送给前端，在前端中<img src="https://img-blog.csdnimg.cn/2022010708322893420.jpg">就能正常显示图片。

前端代码逻辑

<!-- 主体部分 -->
        <el-main>
            <el-table :data="tableData" border style="width: 100%" align="center">
                <el-table-column prop="photo" label="人脸照片" width="150">
                    <template slot-scope="scope">
                        <img style="width:80px;height:100px" :src="scope.row.photo">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                <el-table-column prop="sex" label="性别" width="110"></el-table-column>
                <el-table-column prop="idcard" label="身份证号" width="180"></el-table-column>
                <el-table-column prop="time" label="录入时间" width="150"></el-table-column>
                <el-table-column label="操作" width="280">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleClick(scope.row)" size="mini">查看</el-button>
                        <el-button type="success" @click="editClick(scope.row)" size="mini">编辑</el-button>
                        <el-button type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

在script中添加

import axios from 'axios'
export default {
    data () {
        return {
        	tableData: []
        	}
        }
    mounted: function () {
        var _this = this
        axios.get('http://localhost:8761/face/getAllFaceInfo').then(res => {
          if (res !== null) {
            _this.tableData = res.data
            _this.tableData.forEach(element => {
                element.photo = 'data:image/jpg;base64,' + element.photo
            })
          } else {
            alert('查询失败')
          }
        }).catch(res => {
          console.log(res)
        })
    }   
}

在这里mounted: function ()是关键，它在页面初始化后调用该函数，这里我进行的逻辑是调用axios进行请求后端，将获取到的值赋值给tableData，此时我们的tableData中的photo值只为base64，我们需要再进行一些处理才能直接在img标签中显示element.photo = 'data:image/jpg;base64,' + element.photo，成功处理后table的prop对应tableData中的属性项就直接获取到值显示。

后端代码逻辑

controller

@RestController
public class FaceInformationController {

	@Autowired
	private FaceInformationService faceInformationService;

	@RequestMapping(value = "/getAllFaceInfo" ,method = RequestMethod.GET)
	@CrossOrigin(origins = "*",maxAge = 3600)
	public List<FaceInformation> getAllFaceInfo() {
		System.out.println("有请求来了");
		List<FaceInformation> faceInfoList = faceInformationService.findAll();
		return faceInfoList;
	}

}

faceInformationService.findAll();就是获取所有的属性。
我这里的pojo类为：

public class FaceInformation implements Serializable {

	private Integer id; //主键
	
	private byte[] photo; //人脸照片
	
	private String name; //姓名
	
	private String sex; //性别
	
	private String idcard; //身份证号
	
	private Date time; //录入时间
}

这里需要注意的一点是，我们mysql数据中存放图片的数据类型为blob类型所以mybatis需要进行数据转换，定义一个typeHandle，别急，我们先看看数据库表哈。

这里采用的是mediumblob格式，该类型可以存放16M左右的大小，对blob类型不了解的可以另行再百度一下。

接下来是定义typeHandle。

public class BlobTypeHandler extends org.apache.ibatis.type.BlobTypeHandler {
}

在mapper中，对返回的结果集进行映射，我们就可以成功获取到数据库中的值。

	<resultMap id="faceInfoMap" type="com.zj.atom_face.pojo.FaceInformation">
		<result property="id" column="id"></result>
		<result property="photo" column="photo" javaType="byte[]" jdbcType="BLOB" typeHandler="com.zj.atom_face.common.BlobTypeHandler"></result>
		<result property="name" column="name"></result>
		<result property="sex" column="sex"></result>
		<result property="idcard" column="idcard"></result>
		<result property="time" column="time"></result>
	</resultMap>
	<select id="findAll" resultMap="faceInfoMap">
		select * from faceInfo
	</select>

到这里就可以成功运行了。