vue项目,axios请求后端的图片文件流
2023-09-14 09:02:29 时间
1、接收的是字节数组
axios .get('/avatar', { params: param, responseType: 'arraybuffer' }) .then(response => { return 'data:image/png;base64,' + btoa( new Uint8Array(response.data) .reduce((data, byte) => data + String.fromCharCode(byte), '') ); }).then(data => { ... })
2、项目中的后端
@GetMapping(value = "/avatar") public byte[] getUserAvatar() { return this.sysUserService.getUserAvatarByUserId(SecurityUtils.getCurrentUserId()); } public byte[] getUserAvatarByUserId(String id) { SysUserAvatar userAvatar = this.sysUserAvatarDao.queryById(SecurityUtils.getCurrentUserId()); if(userAvatar == null) return new byte[0]; File file = new File(userAvatar.getPath()); if(!file.exists()) return new byte[0]; FileInputStream inputStream = null; byte[] bytes = null; try { inputStream = new FileInputStream(file); bytes = new byte[inputStream.available()]; int read = inputStream.read(bytes, 0, inputStream.available()); log.info("读取用户头像数据:"+read+"字节"); } catch (Exception e) { e.printStackTrace(); throw new CommonException(StatusCode.ERROR,"读取文件错误"); }finally { IoUtil.close(inputStream); } return bytes; }
3、vue项目中的前端
// 获取头像图片的字节数组byte[] export function getAvatar() { return request({ url: `api/users/avatar`, method: 'get', responseType: 'arraybuffer' }) }
getUserAvatar() { getAvatar().then(res => { this.AvatarData = 'data:image/png;base64,' + btoa( new Uint8Array(res.data) .reduce((data, byte) => data + String.fromCharCode(byte), '')) }) }
<img :src="user.avatar ? AvatarData : Avatar" title="点击上传头像" class="avatar">
4、补充,要是后端是不是字节数组返回,而是通过response的blob类型返回
// 使用axios请求上传接口 axios({ method: 'get', url: url, // 请求地址 responseType: 'blob' // 设置接收格式为blob格式 }).then(res => { // console.log(res) if (res && res.data && res.data.size) { const dataInfo = res.data let reader = new window.FileReader() // 使用readAsArrayBuffer读取文件, result属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据 reader.readAsArrayBuffer(dataInfo) reader.onload = function (e) { const result = e.target.result const contentType = dataInfo.type // 生成blob图片,需要参数(字节数组, 文件类型) const blob = new Blob([result], { type: contentType }) // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上 const url = window.URL.createObjectURL(blob) console.log(url) // 产生一个类似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串 } } })
相关文章
- 简单vue项目脚手架
- Vue_(组件通讯)动态组件结合keep-alive
- vue导出Excel文件(入门篇)
- vue文件在vs code中没有智能提示
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- vue生成路由实例, 使用单个vue文件模板生成路由
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
- php/nginx/axios: 文件上传: 配置最长执行时间等相关项 (php8.1.1 / nginx 1.18.0 / vue@3.2.26 )
- vue中template的作用及使用
- vue文件命名规范和文件夹命名规范
- vue之组件的使用(router-view和components)&vue组件的复用&vue顶部导航栏实例
- vue脚手架搭建报错:vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOU
- vue快速学习02、基础用法
- vue element-ui 文件上传
- Vue新窗口打开this.$router
- 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
- vue中将验证表单输入框的方法写在一个js文件中(表达式验证邮箱、身份证、号码、两次输入的密码是否一致)
- 217:vue+openlayers上传GPX文件,导出geojson文件
- 189:vue+openlayers 上传CSV文件,导出Geojson格式文件
- 188: vue+openlayers上传GeoJSON文件,导出CSV格式文件
- 181:vue+openlayers 加载解析geojson文件,给每一个feature(非整体)添加渐变颜色
- 164:vue+openlayers在3857坐标系项目下导出KML文件
- 035:vue+openlayers上传GeoJSON文件并解析(代码示例)
- 023:vue+openlayers加载本地KML文件 (代码示例)
- 如何在vue组件中引入外部的css和js文件
- Vue安装