Java后端传图片字节流到Vue前端显示

Java将本地图片转字节流byte[]数组

service

@Overridepublic byte[] image2bytes(String imgSrc) throws Exception {FileInputStream fin = new FileInputStream(imgSrc);//可能溢出,简单起见就不考虑太多,如果太大就要另外想办法，比如一次传入固定长度byte[]byte[] bytes  = new byte[fin.available()];//将文件内容写入字节数组，提供测试的casefin.read(bytes);fin.close();return bytes;}

controller

@ApiOperation(value = "")@PostMapping("getImgBytes")@ResponseBodypublic CommonResult<byte[]> getImgBytes(@RequestBody JSONObject jsonObject) throws Exception {Object obj = jsonObject.get("imgStr");  //前端传来的是json对象，需要去除字符串String str = obj.toString(); //Object对象转StringSystem.out.println(str);byte[] b = fragmentService.image2bytes(str);return CommonResult.success(b);}

Vue发送本地图片url给后端，获取图片字节流并显示图片

将url发送给后端，获取返回的字节流（其中imgPath为图片url，imgBase存转化的字节流）

showImgByte() {this.$http.post('http://localhost:8080/fragment/getImgBytes', {imgStr: this.imgPath}).then((response) => {if (response.data.code === 200) {this.$message({type: 'success',message: '成功'})console.log(response.data)this.imgBase = response.data.dataconsole.log(response.data.data)} else {this.$message({type: 'error',message: '失败'})}})},

组件上显示图片
template标签中写

<el-image:src="picUrl":fit="fit"/>

script标签中的data(){}中写

data() {return {imgPath: '',  //存图片urlexcelPath: '',picUrl: '',  //img标签显示fit: 'fill',  //img填充方式imgBase: '' //存图片字节流}},

显示图像的button绑定的方法中写，点击即可显示图像

showImg() {this.picUrl = 'data:image/png;base64,' + this.imgBase},

Java后端传图片字节流到Vue前端显示相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
使用MultipartFile+ElementUi(el-upload)实现前端向后端传图片
引言: 在前后端交互的过程中,数据的传输可以说是交互的核心,这篇博客是对前端向后端传输图片的介绍.后端使用的是SpringMvc框架,前端使用的是Vue.2x结合ElementUi组件库实现交互. M ...
java后端传object给js_【JSON】JSON在前端和后端传递
前后台最最传统的交互方式就是表单交互,然后用request.setAttribute方法设置结果,渲染jsp,然而随着前台界面的复杂程度的提高,或者是使用了某些前端框架(sigmagrid)越来越多的 ...
java后端导出excel文件流，前端vue接收下载
1.后端excel导出工具类主要依赖 <dependency><groupId>cn.hutool</groupId><ar ...
ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post, ...
前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？
相信无论是前端还是后端开发工程师,对于Base64都不会感到陌生,在开发中我们经常会将一些小图片以Base64的形式存储和加载.然而知其然也要知其所以然,Base64究竟是什么,我们为什么要使用Bas ...
vue 前端显示图片加token_vue+node.js手把手教你搭建一个直播平台（二）
上一期,帅气的小羽给老铁们介绍了直播平台的项目的后端搭建,这期就让小羽带大家来搭建一下前端的框架. 1.创建前端工程毫无疑问,搭建一个项目的框架,那第一步肯定是得创建一个工程啦.cmd命令,输入vu ...
后端图片存储绝对路径，Vue前端展示报错
因为有个EXCEL导出功能,用户需要知道图片在电脑盘符位置,因此数据库不能直接存项目地址,因此想到一个解决办法首先在后端指定映射虚拟路径,将盘符路径直接映射到项目路径,用来保证前端vue访问这样操 ...
vue 前端显示图片加token_手摸手，带你用vue撸后台系列二(登录权限篇)
完整项目地址:vue-element-admin https://github.com/PanJiaChen/vue-element-admin 前言拖更有点严重,过了半个月才写了第二篇教程.无奈自 ...

Java后端传图片字节流到Vue前端显示

Java将本地图片转字节流byte[]数组

Vue发送本地图片url给后端，获取图片字节流并显示图片

Java后端传图片字节流到Vue前端显示相关推荐

最新文章

热门文章