html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...

文件、图片在后端主要以两种方式存储：

1.保存在服务器上，数据库中存储的是该文件、图片的地址；

2.将文件、图片转为二进制流，数据库中存储的是对应的二进制流。

针对第一种情况的话，直接请求接口获取到对应的URL地址，赋值给src即可。

第二种的话需要转换一下，请求接口获取的是二进制流，在控制台看到的会是一堆乱码，由于responseType默认返回的是json数据，需要将它转为blob对象，然后使用blob的API生成临时的URL地址，来显示对应的文件、图片。

实现代码：

1.在请求接口的时候加一句话：

responseType: ‘blob‘,

2.将返回的信息转换为blob对象之后，生成临时的URL地址：

this.src = URL.createObjectURL(res.data);

此时取得的变量src就是要预览的文件、图片的URL地址，就可以正常显示了。

注意：

1.该实现代码是针对第二种返回的情况，若是直接返回的URL地址，则不需要做这些操作，接口返回的值直接赋值给src就可以了。

2.文件、图片本质上来说是一样的，都是通过URL来访问，预览，下载。

3.responseType: ‘blob‘,的添加位置：

原文：https://www.cnblogs.com/5201314m/p/12693335.html

html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...相关推荐

想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式
文件.图片在后端主要以两种方式存储: 1.保存在服务器上,数据库中存储的是该文件.图片的地址: 2.将文件.图片转为二进制流,数据库中存储的是对应的二进制流. 针对第一种情况的话,直接请求接口获取到对 ...
Vue 图片、PDF预览（Blod数据类型）
Vue 图片.PDF预览(Blod数据类型) 简单的PDF/图片预览请求接口需要将后端返回的文件转为文件流这里的请求用的axios封装的也可以用原生的注意设置responseType: &q ...
html上传动态图片不显示图片,解决 viewer.js 动态更新图片导致无法预览的问题
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
html动态添加图片不显示不出来,解决 viewer.js 动态更新图片导致无法预览的问题...
前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这 ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
php 点击选择图片上传,php上传多张图片时，选择图片后即可预览的问题
这几天一直在解决一个问题,上传图片时选择成功后就能预览. 需求:在点击上传图标的时候会在前面的input框中显示出文件名,然后点击后面的查看按钮就可以预览选择的这张图片了,要求不能刷新页面 1.一开始 ...
关于php上传多张图片时，选择图片后就可以预览的问题
这几天一直在解决一个问题,上传图片时选择成功后就能预览. 需求:在点击上传图标的时候会在前面的input框中显示出文件名,然后点击后面的查看按钮就可以预览选择的这张图片了,要求不能刷新页面 1.一开始 ...
在html中的file怎么只能选择图片,input type=file 选择图片并且实现预览效果
通过标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上 ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...

html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...

html怎么显示返回的图片,想要预览文件或是图片，将后端返回的信息转换为前端可以正常显示的格式...相关推荐

最新文章

热门文章