前言

前端传图片给后端的方式，是通过bsae64传输，然后后端把接收到的转化为字节流在把图片展示出来

后端传前端直接传输了字节流

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法

一、前端传后端

//参数为图片的静态文件地址
clickImg(size){//将图片传到后端this.changeBlob(size).then(res =>{let reader = new FileReader()// 读取图片，转化为blob格式是因为此方法参数为blobreader.readAsDataURL(res)// 读取完毕后的操作reader.onloadend = (e) => {// reader.result就是图片的base64字符串createScanCode(reader.result).then(res=>{//这就是个请求，后端对接好，参数用String类型接受就行})}})},//将地址转化为blob格式changeBlob(size){return new Promise(resolve => {const xhr = new XMLHttpRequest();xhr.open('GET',size, true);xhr.responseType = 'blob';xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);}};xhr.send();});

二、后端接受，并返回给前端

 //用户生成二维码@PostMapping("/createScanCode")public R<?> createScanCode(@RequestBody SysScanCode sysScanCode) throws IOException, WriterException {//base64转字节流，然后想怎么操作都可以byte[] decoderBytes = Base64.getDecoder().decode(sysScanCode.getBasePic().split(",")[1]);//逻辑省略.....return R.ok();}//用户拿出图片@PostMapping("/getScanCode")public ResponseEntity<byte[]> getCode(@RequestBody SysScanCode user){//我这边是从数据库里边直接拿出来//拿的过程就省略了byte[] scanCode = sysScanCode.getScanCode();final HttpHeaders headers = new HttpHeaders();headers.setContentType(MediaType.IMAGE_PNG);//把字节流直接放进去传给前端就okreturn new ResponseEntity<>(scanCode,headers, HttpStatus.OK);}

三，前端接受返回

//直接一个请求，接受到后端传过来的字节流
getScancode().then(res=>{let blob=new Blob([res])//利用这个方法生成url直接拿到标签里边用let url =window.URL.createObjectURL(blob)})

Spring+Vue前后端传输图片-简单易上手，copy直接用相关推荐

SpringBoot+Vue前后端分离实战（用户注册登录）
文章目录前言注册前端部分逻辑发送请求后端处理登录前端获取token 前端token状态管理后端处理用户登录生成token 拦截器设置总结前言昨天抽空终于把后端架起来了,准备开 ...
《Vue+Spring Boot前后端分离开发实战》专著累计发行上万册
杰哥的学术专著<Vue+Spring Boot前后端分离开发实战>由清华大学出版社于2021年3月首次出版发行,虽受疫情影响但热度不减,受到业界读者的热捧,截至今日 ...
phython在file同时写入两个_喜大普奔，两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了
折腾了一周的域名备案昨天终于搞定了. 松哥第一时间想到赶紧把微人事和 V 部落部署上去,我知道很多小伙伴已经等不及了. 1. 也曾经上过线其实这两个项目当时刚做好的时候,我就把它们部署到服务器上了, ...
记一次Spring boot 和Vue前后端分离的入门培训
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:2020年7月程序员工资统计,平均14357元,又跌了,扎心个人原创100W+访问量博客:点击前往,查看更多作者 ...
Vue+Spring boot前后端响应流程总结
Vue+Spring boot前后端响应流程总结前端请求页面路径,首先会经过路由: 经过解决跨域问题以后,就会请求到后端接口,后端接口返回的数据会封装到then回调方法的res参数中. 经过回调函数 ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...
基于flask+vue前后端分离一款简单的旅游网站源码，带admin管理系统
介绍毕业设计-flask-vue前后端分离一款简单的旅游网站,带admin管理系统软件架构软件架构说明使用Python-flask 轻量级框架编写后端程序,前端采用Vue编写,后端接口都在蓝 ...
开源~~~~spring boot +vue 前后端分离在线考试系统加自动组卷！！！！
在线考试系统+自动组卷!!! springboot +vue 前后端分离系统想要源码的可以B站搜索技术小余哥
SpringBoot+vue前后端分离博客项目
SpringBoot+vue前后端分离博客项目 Java后端接口开发 1.前言 2.新建Springboot项目 3.整合mybatis plus 第一步:导入jar包第二步:然后去写配置文件: 第 ...

Spring+Vue前后端传输图片-简单易上手，copy直接用

文章目录

前言

一、前端传后端

二、后端接受，并返回给前端

三，前端接受返回

Spring+Vue前后端传输图片-简单易上手，copy直接用相关推荐

最新文章

热门文章