vue 项目文件流数据格式转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字符串
}
}
})
// 获取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
vue 项目文件流数据格式转blob图片预览展示的更多相关文章
- vue文件流转换成pdf预览(pdf.js+iframe)
参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端 ...
- vue项目中编写一个图片预览的公用组件
今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...
- 强大的图片展示插件,JQuery图片预览展示插件
只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...
- 9种CSS3炫酷图片展开预览展示动画特效
详细内容请点击 在线预览立即下载 这是一组共9款CSS3炫酷图片预览展示动画特效插件.css的新特性可以让我们制作出各种炫酷的动画效果.该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在 ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- vue-preview vue图片预览插件+缩略图样式
一.安装 npm i vue-preview -S 二.main.js中 导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...
- 【VUE】图片预览放大缩小插件
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
随机推荐
- 微信自定义分享 IOS端分享失败
1.在IOS微信浏览器中自定义分享link 链接中的中文需要encodeURIComponent() 编码(安卓会自动编码) 2.另外在IOS微信浏览器中自定义分享 imgUrl 不能大于34KB ...
- 新西兰程序员 ASP.NET网站中设置404自定义错误页面
新西兰程序员 ASP.NET网站中设置404自定义错误页面 在用ASP.NET WebForm开发一个网站时,需要自定义404错误页面. 做法是这样的 在网站根目录下建立了一个404.html的错误页 ...
- 使用VLC发送TS流与播放TS流
使用VLC发送TS流与播放TS流 一.如何使用VLC发送TS流 1.添加一个文件至VLC 2.选择串流,继续 3.选择UDP,点击添加 4.输入地址及端口 5.选择h.264+mp3(TS) 6.ne ...
- 解决 Windows启动时要求验证
KB971033 微软检测盗版jar SLMGR -REARM 出现Window启动时要求验证版本, 在cmd窗口输入命令重新配置 重新启动即可 出现错误:解决办法 开始→设置,打开控制面板的“添加和 ...
- 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 ...
- Redis的各项功能解决了哪些问题?(转)
http://www.cnblogs.com/linianhui/p/what-problem-does-redis-solve.html 先看一下Redis是一个什么东西.官方简介解释到:Redis ...
- centos7.5配置ntp时间服务器
Centos7配置ntp时间服务器 Centos7配置时间服务器,一个服务端,多个客户端,客户端去同步服务端 服务端: 1.先修改时区,否则即使配置完ntp时间也不对,修改时区参照:https://w ...
- Bootstrap, 模态框实现值传递,自动勾选
目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: 有一个这样的需求, 在父页面有一个table, ...
- Class WriteGroupAttribute
[WriteGroup]可以排除在创建已声明写入同一组件的查询时未知的组件. 这允许安全地扩展组件系统而无需编辑先前存在的系统. 目标是为期望将数据从一组组件(输入)转换为另一组(输出[s])的系统能 ...
- switch/catch
public class SwitchTest { public static void main(String[] args) { String param = null; switch (para ...