基于vue和elmentUi和SpringMvc从后台数据库中返回图片到前端显示

基于vue和elmentUi从后台数据库中返回图片到前端显示

我前端用img标签subItem.logoPath的路径值类似于http://localhost:9999/office/image?imgid=UUID
是从后台获取UUID后封装的。

 <img  :src=subItem.logoPath /> 

属性定义

 import {baseurl} from '@/utils/request'
 var url=baseurl+"/office/image?imgid=";

utils/request中的baseurl地址如下，之所以要配置在这里是因为这样才能实现当前后台部署到服务器后地址的动态变化。

export const baseurl = 'http://localhost:9999';

封装方法`，的后台得到的是image对象的集合，image对象包含了图片的UUID，然后通过这个UUID为标准用http://localhost:9999/office/image?imgid=UUID 格式的请求，到数据库获取对应的图片。

 getData(){
               List({type:1,category:2}).then(res => {
                    if(res.status === 200) {
                       this.list[0].data=res.data.data.list;
                        this.list[0].data.forEach(row=>{
                             row.logoPath=url+row.logoPath;
                         })
                        console.log(this.getlist[0])      
                    } else {
                         this.$message({
                            message: res.data.message,
                            type: 'error',
                            duration: 2000,
                            showClose: true
                        })
                    }
                })

后台控制层代码如下

    @Log
    @ApiOperation(value = "返回图片到页面", notes = "图片访问", code = 200, produces = "application/json")
    @GetMapping(value = "/image")
    public void getImage(@ApiParam(value = "对应数据库图片")@RequestParam String imgid,HttpServletResponse response) throws IOException {

        response.setContentType("image/jpeg");
        try{
            byte[] imgbytes= imageServie.getByteById(imgid);
            OutputStream  out= response.getOutputStream();
            out.write(imgbytes);
        }catch (Exception e){
            throw new CustomException(ResultCode.OFFICE_GETLIMAGE_FAIL);
        }

    }

ImageServieImpl代码

    //获取图片
    @Override
    public byte[] getByteById(String imgId) {
        return imageMapper.getByteById(imgId).getImage();
    }

ImageMapper

   //从数据库获取图片的byte数组
    public Image getByteById(String imgId);

数据库交互使用Mybatis，ImageMapper.xml配置如下

  <resultMap id="BaseResultMap" type="com.XXX.XXX.pic.domain.Image">
    <id column="img_id" jdbcType="VARCHAR" property="imgId" />
    <result column="image" jdbcType="BLOB" property="image" typeHandler="org.apache.ibatis.type.BlobTypeHandler"/>
  </resultMap>
    <!--从数据库获取图片的byte数组-->
   <select id="getByteById" resultMap="BaseResultMap" parameterType="string">
        SELECT img_id,image from image where img_id=#{param1}
   </select>