为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上
 
// 使用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字符串
}
}
})
 
其他文件格式转换:
base64图片转成blob图片,一般base64图片链接比较长,使用链接跳转打开时不太友好,可能会解析错误,可以转成blob图片打开
// 获取base64图片, url图片地址,
// 如果返回的图片地址不是base64格式,可以通过这个方法转换成base64
getFile (url) {
let reader = new FileReader()
reader.readAsDataURL(url)
reader.onload = function (e) {
const base64Data = e.target.result
// 调用dataURItoBlob转换方法
console.log(this.dataURItoBlob (base64Data))
}
}, // 将base64图片转化成blob图片, base64Data base64图片地址
dataURItoBlob (base64Data) {
// console.log(base64Data, base64Data.length)
let byteString = base64Data
if (base64Data.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(base64Data.split(',')[1]) // base64 解码
} else {
byteString = unescape(base64Data.split(',')[1])
}
// 获取文件类型
let mimeString = base64Data.split(',')[0].match(/:(.*?);/)[1] // mime类型 // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
// let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
// let uintArr = new Uint8Array(arrayBuffer) // 创建视图 let uintArr = new Uint8Array(byteString.length) // 创建视图 for (let i = 0; i < byteString.length; i++) {
uintArr[i] = byteString.charCodeAt(i)
}
// 生成blob图片
const blob = new Blob([uintArr], {
type: mimeString
})
console.log(uintArr, blob)
// 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
return URL.createObjectURL(blob)
}

最近做登录的图片验证码,发现把接收格式设置成arraybuffer,更简单,这里把方法补充一下,一般我们的项目会有一个axios配置文件,设置请求拦截,响应,在这里我们要先设置一下

axios.js文件

import axios from 'axios'
import {
Message
} from 'element-ui'
import store from '@/store'
import {
getToken
} from '@/utils/auth'
import router from '@/router' const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
// withCredentials: true, // 跨域发送cookies配置
timeout: 10000,
method: 'post'
}) service.interceptors.request.use(
config => {
if (store.getters.token) {
config.headers['X-Token'] = getToken()
}
return config
},
error => {
return Promise.reject(error)
}
) service.interceptors.response.use(
response => {
const res = response.data
if (res.responseCode) { // 其他的都是一些常规配置,根据你自己项目配置就好,主要注意这里加个判断,因为如果是文件流,是不会返回正常接口的res,code,data之类的数据,直接是一串字符,这里需要判断一下是不是文件流数据
if (res.responseCode !== '000000' && res.responseCode !== '000025') {
Message({
message: res.responseMsg || 'Error',
type: 'error',
duration: 2 * 1000
})
// 重新登录
if (res.responseCode === '000001') {
setTimeout(function() {
store.dispatch('user/resetToken').then(() => {
router.replace('/login')
})
}, 3000)
}
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
} else { // 如果没有返回responseCode,说明是文件流数据,直接把结果返回去
return res
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 2 * 1000
})
return Promise.reject(error)
}
) export default service

如果你的接口请求没有自己进行二次封装,使用统一请求方法的的,这里不能使用统一方法,需要单独引入axios,单独设置返回数据格式,或者你在请求拦截那里判断,如果是请求验证码接口就把返回格式设置成arrayBuffer,

import axios from './axios'

axios({
url: '/kaptcha/getKaptcha',
method: 'post',
responseType: 'arraybuffer'
}).then(res => {
console.log(66, res)
const blob = new Blob([res], { type: 'image/jpeg' })
const u = window.URL.createObjectURL(blob)
this.imgCode = u
})

打印的结果

后台接口看到效果

实际效果

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

    https://blog.csdn.net/qq_34664239/article/details/94595508

vue 项目文件流数据格式转blob图片预览展示的更多相关文章

  1. vue文件流转换成pdf预览(pdf.js+iframe)

    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...

  2. vue项目中编写一个图片预览的公用组件

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...

  3. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  4. 9种CSS3炫酷图片展开预览展示动画特效

    详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...

  5. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  6. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  7. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

  8. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  9. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

随机推荐

  1. 微信自定义分享 IOS端分享失败

    1.在IOS微信浏览器中自定义分享link 链接中的中文需要encodeURIComponent() 编码(安卓会自动编码) 2.另外在IOS微信浏览器中自定义分享 imgUrl  不能大于34KB ...

  2. 新西兰程序员 ASP.NET网站中设置404自定义错误页面

    新西兰程序员 ASP.NET网站中设置404自定义错误页面 在用ASP.NET WebForm开发一个网站时,需要自定义404错误页面. 做法是这样的 在网站根目录下建立了一个404.html的错误页 ...

  3. 使用VLC发送TS流与播放TS流

    使用VLC发送TS流与播放TS流 一.如何使用VLC发送TS流 1.添加一个文件至VLC 2.选择串流,继续 3.选择UDP,点击添加 4.输入地址及端口 5.选择h.264+mp3(TS) 6.ne ...

  4. 解决 Windows启动时要求验证

    KB971033 微软检测盗版jar SLMGR -REARM 出现Window启动时要求验证版本, 在cmd窗口输入命令重新配置 重新启动即可 出现错误:解决办法 开始→设置,打开控制面板的“添加和 ...

  5. SpringBoot学习之一 Unable to find a single main class from the following candidates

    在启动SpringBoot项目是报错 Unable to find a single main class from the following candidates [boot.myboot.Sam ...

  6. Redis的各项功能解决了哪些问题?(转)

    http://www.cnblogs.com/linianhui/p/what-problem-does-redis-solve.html 先看一下Redis是一个什么东西.官方简介解释到:Redis ...

  7. centos7.5配置ntp时间服务器

    Centos7配置ntp时间服务器 Centos7配置时间服务器,一个服务端,多个客户端,客户端去同步服务端 服务端: 1.先修改时区,否则即使配置完ntp时间也不对,修改时区参照:https://w ...

  8. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  9. Class WriteGroupAttribute

    [WriteGroup]可以排除在创建已声明写入同一组件的查询时未知的组件. 这允许安全地扩展组件系统而无需编辑先前存在的系统. 目标是为期望将数据从一组组件(输入)转换为另一组(输出[s])的系统能 ...

  10. switch/catch

    public class SwitchTest { public static void main(String[] args) { String param = null; switch (para ...