前后端传二进制图片流，数据库存图片前端点击按钮开新窗口显示

有存截图并查看的需求。由于项目特殊性为使用者分别本地部署，无固定服务器，且截图数量有限可控，于是没用更合理的数据库存路径形式而是直接将图片以blob格式存入库

Screenshot.java

public class Screenshot {
    private Integer id;
    private String sceneid;
    private byte[] photo;
}

ScreenshotMapper.java

@Select("SELECT * FROM `screenshot` WHERE sceneid = #{sceneid}")
    Screenshot select(String sceneid);

ScreenshotService.java

public byte[] getScreenshot(String sceneid){
        return screenshotMapper.select(sceneid).getPhoto();
    }

ScreenshotController.java

@RequestMapping("screenshot")
    public void showScreenshot(@RequestBody String sid, HttpServletResponse response) throws IOException {
        // 处理前端传入的json参数
        JSONObject jsonData = JSONObject.fromObject(sid);
        String scene = jsonData.get("sid").toString();
        // 设置contenttype为blob
        response.setContentType("blob");
        byte[] screenshot = screenshotService.getScreenshot(scene);
        response.getOutputStream().write(screenshot);
        response.flushBuffer();
    }

vue

this.axios.post(
        '/api/scene/screenshot',
        { sid: row.id },
        { responseType: 'blob' }
      ).then((response) => {
        // console.log(response)
        //console.log(typeof (response.data))
        const blob = new Blob([response.data], { type: 'image/png' })
        // 新页面显示的写法
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.target = 'blank'
        link.click()
        // 本页面显示的写法
        this.imgUrl = URL.createObjectURL(response.data)
      })

要点1：必须发post请求，且将responseType设为blob
前端接到的response必须是blob格式，get请求返回的responseType会被处理成string

要点2：const blob = new Blob([response.data], { type: ‘image/png’ })设置为图片
缺少这个blob会默认直接输出二进制流

要点3：URL.createObjectURL(blob)将blob转为url，赋给图片的src

参考链接：vue axios(下载文件流)设置返回值类型responseType:'blob’无效的问题
最初踩坑的时候console报错让我以为是对blob的处理方式不对，看了链接之后意识到是返回的类型不对不是blob，但不是因为mock而是因为请求方式