vue前端获取后端传过来的图片流进行展示

最新推荐文章于 2024-06-22 11:48:05 发布
最新推荐文章于 2024-06-22 11:48:05 发布
阅读量1.1w 收藏 37
点赞数 5
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43488547/article/details/112475766
版权

get请求获取到后端传来的图片流不能直接再页面进行展示，需要在接口处进行转化再赋值，转化的方式就是

window.URL.createObjectURL( )

，将图片流转化为本地请求地址。

let res= await this.$http.get('url',{
        responseType: 'blob'
})
this.captchaImg = window.URL.createObjectURL(res.data)

responseType: ‘blob’
这个也不能少

YogLn
关注
  • 5
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
关于POST接口返回图片流，前端展示图片
qq_33989590的博客
08-23 4518
工作当中，有时候会碰到后端由于存储方式等原因，返回给前端的图片的请求方式为POST，这个时候前端如果需要把图片显示在页面上，就要把图片流转换为图片： post返回的图片流，在chrome的network preview时是一个正常图片，前端通过console.log打印的话就会是一串乱的编码，出现问题的原因的是前端请求默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。我们只需要在前端请求配置，比如axios中配置responseType为blob 再然后：
js提交form表单的两种方法
热门推荐
如梦山河的博客
08-13 1万+
当输入用户名和密码为空的时候，需要判断。这时候就用到了校验用户名和密码，这个需要在前端页面写；有两种方法，一种是用submit提交。一种是用button提交。 方法一： 在jsp的前端页面的头部插入一个js方法： function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("userpassid").value; if(result ==
[Django学习]前端+后端两种方式处理图片流数据
wahzx的博客
06-22 800
前后端完整过程为：前端填写图片标题等信息，之后选择图片并传给后端，后端把前端传过来的图片保存在当前项目文件中，并在数据库中存放图片的位置。前端想要查看图片，后端先从数据库中调出图片的位置信息，之后把位置信息传给前端，前端src展示出图片。1.首先，我们现在models.py文件中定义模型来存放该图片数据,前端传来的数据都会存放在Django项目文件里的images文件夹下。4.在视图文件里增加两个函数，一个是用来前端给后端传图片流数据，后端进行处理；另一个是后端从数据库中调出图片返还给前端。
跨域的配置
如梦山河的博客
04-03 6377
1.什么是跨域 跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 注意：跨域限制访问，其实是浏览器的限制 同源策略：是指协议，主机（域名），端口都要相同，其中有一个不同都会产生跨域； 2. 跨域的解决方法 方式一：jsonp jsonp (JSON With Padding) 就是打包在函数中调动的json,或者包裹的json json 是一种数据格式；jsonp是一种数据调用方式 //json { "name":"小明" } //
vue安装使用v-chart时报错解决方案
如梦山河的博客
01-10 2485
v-charts 安装 ： npm i v-charts echarts -S 运行报错： npm WARN echarts-liquidfill@2.0.6 requires a peer of echarts@^4.8.0 but none is installed. You must install peer dependencies yourself. npm WARN echarts-liquidfill@2.0.6 requires a peer of zrender@^4.3.1 but n
element ui中Select 下拉框最后一行显示不完整
如梦山河的博客
01-04 2088
原因： 因为做目录时，使用了el-scrollbar，为了防止出现横向滚动条，增加了 .el-scrollbar__wrap { overflow-x: hidden; } 导致这个问题 解决方式 .el-select-dropdown .el-scrollbar .el-scrollbar__wrap { overflow: scroll!important; } 补充 填补的样式一定要加!important，以及不能写在标记了scoped的style域内 ...
V-charts坐标轴文字太长显示不全的问题
如梦山河的博客
01-23 1984
使用v-charts <ve-histogram class="charts" :settings="chartSettings" :data="chartData" :extend="chartExtend" :grid="grid"></ve-histogram> 方案一： 旋转 chartExtend: { // x轴字体斜显示 xAxis: { axisLabel: { interval: 0, // rotate: 90 // 旋转的度数
HTML基本要点
如梦山河的博客
03-08 1421
HTML是什么？ 百度百科：https://baike.baidu.com/item/HTML/97049 总结：“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言。HTML是用来开发网页的。（网页后缀 html，htm）html是标记语言不是编程语言。 超文本：超级文本，比文本更加牛逼，可以更加丰富的呈现文字信息。 标记：也叫做标签，这个是html里面的一个基...
使用JavaScript和CSS实现不同行颜色的九九乘法表
如梦山河的博客
03-15 1232
源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>乘法九九表</title> <style> table{ background-color: grey; } #odd{ background-color:blue ; } #even...
Vue 使用 V-charts 双坐标轴刻度不一致的问题
如梦山河的博客
01-23 1137
使用双坐标轴 <ve-histogram class="charts" :settings="chartSettings" :data="chartData" :extend="chartExtend" :grid="grid"></ve-histogram> <span slot="footer" class="dialog-footer"> :grid=“grid” 统计图右侧宽度，让右边的坐标轴显示完全 this.chartSettings = {
css样式实现居中对齐
如梦山河的博客
11-19 1041
一、行内元素的居中 1.水平居中 1.text-align .parent { background-color: red; text-align: center; } <div class="parent"> <span class="child">content</span> </div> 2.fit-content .parent { background-color: re
vue接收后端的数据导出为excel表
如梦山河的博客
12-31 990
async getDataList() { const _res = await this.$http.put('total/export', { caseNumbers: ['cdx12', '131'], columns: this.codeCol, },{responseType: 'arraybuffer'}) let blob = new Blob([_res.data], { type: 'application/vnd.ms-
鼠标点击颜色特效
如梦山河的博客
03-25 741
a:link {color: blue} /* 未访问时的状态 */ a:visited {color: gray} /* 已访问过的状态 */ a:hover {color: red} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */ ...
手机号和邮箱的正则表达式校验
如梦山河的博客
11-24 681
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
vue前端将服务器返回的时间戳转换为想要的日期格式
如梦山河的博客
01-14 646
在mian.js中挂载filter Vue.filter('dateFormat',originVal => { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + '') const d = (dt.getDate() + '').padStart(2,'0') const hh = (dt.getHours() + '').padStart(2,'0')
vue中关于兄弟组件和父孙组件之间的通信问题
如梦山河的博客
01-13 385
方法一： 定义一个bus.js文件，在里面new 一个vue得实例对象 import Vue from 'vue' const bus = new Vue(); export default bus; // 公共实例文件 // 主要用于兄弟组件之间的传值问题 在其它.vue文件中引用 import bus from './bus.js' 使用 // 发射 bus.$emit('事件', 参数) // 接受 bus.$on('事件', 参数 => { }) 方法二(推荐）： 在main
人工蜂群算法ABC-Kmean-Transformer-LSTM组合状态识别分类【含Matlab源码 6743期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Kmeans-Transformer-lstm分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Kmeans-Transformer-lstm分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Kmeans-Transformer-lstm分类 4.4.3 灰狼算法GWO/狼群算法WPA优化Kmeans-Transformer-lstm分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Kmeans-Transformer-lstm分类 4.4.5 萤火虫算法FA/差分算法DE优化Kmeans-Transformer-lstm分类 4.4.6 其他优化算法优化Kmeans-Transformer-Lstm分类
【独家首发】龙格库塔算法RUN优化Transformer-BiLSTM负荷数据回归预测【含Matlab源码 6563期】.zip
08-02
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化Transformer-Bilstm预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化Transformer-Bilstm预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化Transformer-Bilstm预测 4.4.3 灰狼算法GWO/狼群算法WPA优化Transformer-Bilstm预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化Transformer-Bilstm预测 4.4.5 萤火虫算法FA/差分算法DE优化Transformer-Bilstm预测 4.4.6 其他优化算法优化Transformer-Bilstm预测
【中科院1区】Matlab实现海鸥优化算法SOA-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值