vue异步获取图片流文件进行图片显示

最新推荐文章于 2024-06-11 09:37:58 发布
最新推荐文章于 2024-06-11 09:37:58 发布
阅读量2.7w 收藏 7
点赞数 6
分类专栏： 技术类 文章标签： vue 图片流 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanzhen2010/article/details/86636946
版权

图片流转图片地址

通过window.URL.createObjectURL可以将图片流转化为本地请求地址，然后直接通过<img src="转化后的地址"/>

注意：

  1. 需要指定返回类型为blob（responseType: ‘blob’）
  2. 如果转化失败，请查看获取到的文件流的类型(typeof)，如果为string，则查看是否是统一的处理将返回值进行的json转化（查看自己的前端框架配置是否做了统一处理；查看main.js中是否存在类似代码if (process.env.NODE_ENV !== 'production') require('@/mock')，如果存在要注释掉）
hanzhen2010
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vue中接受后台传过来的图片文件流blob前端进行展示实现方法
诚的博客
07-29 6066
1.第一种方法（blob转url） 2.第二种方法（blob转base64）
vue图片文件流blob前端进行处理展示
weixin_48597380的博客
10-20 2642
vue图片文件流blob前端进行处理展示。
vue3 文件流预览常见文件(xls,xlsx,ptf,txt,img,excel)
最新发布
tao20010624的博客
06-11 1396
PPT格式转换可能会跟vue的 Object.defineProperty()方法冲突。如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
vue+axios展示二进制文件流图片
01-20
1、请求方式  axios({ url: ‘请求地址’, responseType: ‘arraybuffer’, method: ‘get/post’, params: { …data } }) 2、展示方式  两种展示方式任意选择 1、const url = URL.createObjectURL(new Blob([res]))     // 这种方法需要图片服务器不要添加限制 2、const url = `[removed]${btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromC
vue异步获取流程图片流文件进行图片显示
热门推荐
码农老牛
02-17 1万+
图片流转图片地址 通过window.URL.createObjectURL可以将图片流转化为本地请求地址，然后直接通过&lt;img src="转化后的地址"/&gt; findImageByDeploymentIdAndName(this.flowImgParamData).then((res) =&gt; { let url = window.URL.creat...
前端vue通过URL访问存储在服务器或磁盘的图片
weixin_68266674的博客
10-21 2714
这里前端访问使用的是element。
【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】
seeeeeeeeeee的博客
03-18 7606
前言：今天遇到的后端传一个二维码图片给我，然后给我的是图片流的形式，看起来跟一堆乱码一样，根本用不了，必须要处理转换后才能使用，然后我看了网上帖子有的说的不是很明白，可能新人看不懂，我就也写一个详细解释一下。也避免时间久了我自己忘记了可以回来轻松的看一下。 效果图：后端发过来的数据 就是这么一长条乱码，就是图片流了 最终经过处理后转换成了二维码 方法： 其实方法很简单，流程整理一下，就是window自带了一个转换的方法叫window.URL.createObjectURL() ，但是光用这个还不行，还要
vue处理图片流
weixin_52666327的博客
12-25 719
vue axios请求图片流文件对应的前端展示方法 - 简书 请求时加： responseType: 'arraybuffer', 返回结果处理 downLoadFile('/admin-provider/user/getUserPicById/' + datas.userId).then(data => { this.fileField = 'data:image/png;base64,' + btoa(new Uint8Array(data).reduce...
Vue axios从后台获取到二进制图片流，在前端将其转换为图片展示出来
weixin_51173316的博客
08-15 4274
用axios接收到的后台的图片是二进制乱码： 要使其显示为图片的形式，要对二进制流进行一个转换。 在页面初始化完成时，就发出获取验证码的请求，将其放在mounted钩子函数中： mounted: function () { this.getImgCode() }, 在methods中对获取验证码的方法进行编写： methods: { getImgCode () { this.$http.get('/后端接口', { responseTyp.
vue3 Suspense 异步请求组件使用
pz1021的博客
03-03 2056
Suspense 异步请求组件使用 前端开发中异步请求是非常常见的事情,比如远程读取图片,调用后端接口等等,在vue2 中判断异步状态是一件必要的事情,但是这些状态都要自己处理,于是在3中提供了suspense函数 suspense中文含义是悬念的意思 Suspense是有两个template插槽的，第一个default代表异步请求完成后，显示的模板内容。fallback代表在加载中时，显示的模板内容。 写一个异步请求加载显示的组件 <template> <h1>{{result
BUG随笔（1）vue中的图片链接url如何使用
worldbank021419的博客
11-03 1504
vue中的图片链接url如何使用
vue项目，把图片文件流转为base64格式以图片形式展示在前端
铁锤妹妹的博客
01-13 9603
问题描述 前台需要展示图片，期望后台直接返回图片地址，但是后台给的是的文件流而不是一个图片地址，需要把文件流转为base64的格式展示出来。 请求后台接口时，返回图片内容如下： 上图不是base64格式，二十二进制的文件流数据，前端要想展示，只需要转换数据格式为base64即可。 解决方法 在获取图片接口中需要添加responseType:"arraybuffer" getVerifyCode({ tel = '', }) { // 获取图形验证码 return request
Vue拿到二进制流图片转为正常图片并显示
喜欢做一些demo，和分享遇到的 BUG
09-17 1万+
第一步 axios({ method: 'get', url, responseType: 'arraybuffer' // 最为关键 }) .then(function (response) { that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data) }) arrayBufferToBase6
vue 文件流转png格式
yty1220的博客
07-25 1532
3.用FileReader对象里面的readAsDataURL()方法把文件流转化成文件流链接。5.最后把变量赋值给自己想要展示的对象以后，直接赋给img标签中的src属性就可以了。2.然后用newFileReader()实例化一个FileReader对象。最近在做OA系统需求里面遇到了这个问题绞尽脑汁研究出了解决方案。4.用onload方法异步调取一下返回结果赋值给变量。请求接口返回的数据流用此方法可以转成png。1.先用变量接受一下返回的文件流。.........
vue实现将二进制流形式图片文件，显示到页面上（若依框架）
qq_44206870的博客
11-10 3005
vue实现将二进制流形式图片文件，显示到页面上
vue获取后台的文件流并且转换成图片
qq_44255146的博客
04-12 3608
vue获取后台的文件流并且转换成图片 1.添加request的responseType export function addCode(Equip,data) { return request({ method: “post”, url: ‘/upload/create/’+Equip.width+’/’+Equip.height, data: Equip.data, responseType:‘blob’, }) } 2.进行图片流处理 let blob = new Blob([res]); // 返
在vue el-table中如何把图片链接转换成图片，并给定适合图片大小
2301_76603744的博客
08-06 353
在Vue的el-table中，可以使用自定义的列模板来创建图像列，并使用CSS来控制图像大小。在上面的代码中，我们使用了一个自定义的列模板来显示行数据中的图像。我们将图像的URL传递给一个。要根据表格列宽自动调整图像大小，可以使用CSS中的。元素，我们使用CSS来设置图像的大小。，以确保图像高度不会超过100px。，确保它不会超出列宽。在这个例子中，我们将图像的。
html 图片流文件展示,用JS获取Html中所有图片文件流然后替换原有链接(示例代码)...
weixin_30945845的博客
06-04 559
function displayHtmlWithImageStream(bodyHtml) {var imgReg = /|\/>)/gi;var arr = bodyHtml.match(imgReg);if (arr != null) {for (var i = 0; i < arr.length; i++) {replaceImageUrlWithStream(bodyHtml,...
JS实现图片上传并显示
weixin_49115895的博客
12-22 1772
HTML代码 <!-- html代码 --> <body> <input type="file" id='file'> <div id=""> <img src="" id='img'> </div> </body> js代码 <script type="text/javascript"> var file =document.querySelector('#file'); file.add
vue 文件流获取图片名
01-17
在Vue中获取文件流的图片名可以通过以下步骤实现： 1. 首先，你需要在Vue组件中添加一个文件选择的input元素，用于选择图片文件： ```html <input type="file" ref="fileInput" @change="handleFileChange"> ``` 2. 在Vue组件的methods中，定义一个方法来处理文件选择的change事件： ```javascript methods: { handleFileChange(event) { const file = event.target.files[0]; this.fileName = file.name; } } ``` 3. 在Vue组件的data中，定义一个变量来存储文件名： ```javascript data() { return { fileName: '' } } ``` 4. 最后，在Vue组件的模板中，可以通过绑定数据的方式来显示文件名： ```html <p>文件名：{{ fileName }}</p> ``` 这样，当用户选择了一个图片文件后，文件名就会显示在页面上。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值