java后端返回二进制图片前端进行展示详解

java后端代码：

/*** 图片展示* @param map* @return*/@ApiOperation("图片展示")@PostMapping("/getPucter")public Result getPucter(@RequestBody Map<String,String> map, HttpServletRequest request, HttpServletResponse respones){String str = service.getPucter(map,request,respones);return new Result(200,"成功！",str);}@Overridepublic String getPucter(Map<String, String> map, HttpServletRequest request, HttpServletResponse respones) {String str = "";List<Map<String,String>> list = mapper.getFileUrl(map.get("id"));if (list!=null && list.size()>0) {Map<String,String> mapList = list.get(0);String url = mapList.get("URL");str = FileUtil.getPhoto(respones,url);}return str;}
//path 为图片在服务器的绝对路径public static String getPhoto(HttpServletResponse response,String path) {try {File file = new File(path);FileInputStream fis;fis = new FileInputStream(file);long size = file.length();System.out.println(size);byte[] temp = new byte[(int) size];fis.read(temp, 0, (int) size);fis.close();byte[] data = temp;return  new String(Base64.encodeBase64(data));} catch (IOException e) {e.printStackTrace();return null;}}

vue页面

<el-image style="width: 100px; height: 100px" :src="imgUrl" fit="cover"></el-image>

js代码

 // 获取图片static getPucter (data) {return request({url: '/fileOps/getPucter',timeout: 100000,method: 'post',data: data})}
handleArchived () {let _this = thisimportantMap.getPucter({'id': this.noteFromList.FILE_ID}).then(res => {let src = res.data.datasrc = src == null ? '' : 'data:image/jpg;base64,' + src_this.imgUrl = src})}

根据此大神分享修改

java后端返回二进制图片前端进行展示详解相关推荐

java 左移返回值_java左移右移运算符详解
在阅读源码的过程中,经常会看到这些符号<< ,>>,>>>,这些符号在Java中叫移位运算符,在写代码的过程中,虽然我们基本上不会去写这些符号,但需要明白这些 ...
java后端返回json_Java后端返回Json数据
Java后端返回Json数据 Jackson 导包 com.fasterxml.jackson.core jackson-databind 2.12.1 创建ObjectMapper对象,调用writ ...
后端传验证码图片前端ajax怎么显示图片
后端传验证码图片前端,ajax怎么显示图片.验证码后端返给前端的是一张验证码的图片,如下: 再看浏览器response里的返回
后端返回一个url前端怎么把音视频文件下载下来
后端返回一个url前端怎么把文件下载下来最近做的项目有一个用腾讯云上传音视频的功能,在后台管理里面需要将音视频下载下来,后端是直接返回腾讯云视频url地址的, // 点击下载文件downloadFi ...
拐道交叉的css3动画,CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
DD每周前端七题详解-第五期
DD每周前端七题详解-第五期系列介绍你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 呆呆每周都会分享七道前端题给大家,系列名称就是「DD每周七题」. 系列的形式主要是:3道JavaS ...
java文件流 m.jb51.net_FasfDFS整合Java实现文件上传下载功能实例详解
今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 org.c ...
前端路由模式详解（hash和history）
前端路由模式详解(hash和history) 前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点. hash 模式 hash 模式是一种把前端路由的路径 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...

java后端返回二进制图片前端进行展示详解

java后端返回二进制图片前端进行展示详解相关推荐

最新文章

热门文章

java后端返回二进制图片 前端进行展示 详解

java后端返回二进制图片 前端进行展示 详解相关推荐

最新文章

热门文章

java后端返回二进制图片前端进行展示详解

java后端返回二进制图片前端进行展示详解相关推荐