文件转base64处理或转换blob对象链接
一、文件转base64,代码:
axios({
method: 'get',
url: apiPath.common.downloaddUrl,
responseType: 'blob'
}).then(res => {
console.log(res)
if (res && res.data && res.data.size) {
const dataInfo = res.data
let reader = new FileReader()
reader.readAsDataURL(dataInfo)
reader.onload = function (e) {
const result = e.target.result
console.log(result) // 打印base64链接
}
} else {
// 文件损坏或是提示处理
}
})
Tips、关键点:
1、在一个请求中添加 responseType 为 blob
2、利用 new FileReader() 处理转化获得
二、文件转blob对象链接,代码:
axios({
method: 'get',
url: xxx,
responseType: 'blob'
}).then(res => {
console.log(res)
if (res && res.data && res.data.size) {
const dataInfo = res.data
const blob = new Blob([dataInfo], {type: dataInfo.type})
const u = window.URL.createObjectURL(blob)
console.log(u) // 转化后的链接
} else {
// 文件损坏或是提示处理
}
})
Tips、关键点:
1、在一个请求中添加 responseType 为 blob
2、利用 new Blob() 处理转化获得
三、文件转blob对象链接后下载,代码:
axios({
method: 'get',
url: xxx,
responseType: 'blob'
}).then(res => {
console.log(res)
if (res && res.data && res.data.size) {
const dataInfo = res.data
const blob = new Blob([dataInfo], {type: dataInfo.type})
const u = window.URL.createObjectURL(blob)
console.log(u) // 转化后的链接
let a = document.createElement('a') // 动态创建a链接
document.body.appendChild(a)
a.href = u
let setDownloadName = 'download' // 默认下载的文件名
downloadName && (setDownloadName = downloadName) // downloadName 为方法传进行的值,动态命名。
a.download = setDownloadName
a.click()
window.URL.revokeObjectURL(u) // 移除动态创建的a链接
} else {
// 文件损坏或是提示处理
}
})
Tips、关键点:
1、在一个请求中添加 responseType 为 blob
2、利用 new Blob() 处理转化获得
3、动态创建a链接,并模拟点击
4、如果需要直接跳转展示,可把a.download 的相关处理去掉即可
四、base64文件转blob对象链接,代码:
const b64File = 'data.....'
const contentType = url.substring(5, url.indexOf(';base64')) // 截取文件类型
const b64Data = b64File.substring(b64File.indexOf(',') + 1) // 获得文件头外的数据
const byteCharacters = atob(b64Data)
const byteNumbers = new Array(byteCharacters.length)
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i)
}
const byteArray = new Uint8Array(byteNumbers)
const blob = new Blob([byteArray], {type: contentType})
const u = window.URL.createObjectURL(blob) // 获得的链接
Tips、关键点:
1、在base64文件中获得文件类型及真正的文件数据
2、利用字节数组处理转化获得
文件转base64处理或转换blob对象链接的更多相关文章
- HTML5新特性之文件和二进制数据的操作 Blob对象
HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象
- MP4视频流base64数据转成Blob对象
网上一大堆对图片base64转Blob.File的方法 很少有视频mp4转的,可能是因为原理相同的原因吧!但在项目中针对视频流base64转Blob对象时,花了好长时间才成功,特专门记录一下! APP ...
- Base64图片转Blob对象
//将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...
- [转] Meida视频加密二-Blob对象
2. blob 1 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107" ...
- 『现学现忘』Git对象 — 15、blob对象介绍
目录 (一)Git对象的存放目录 (二)Git中对象类型 (三)blob对象 1.blob对象说明 (1)blob对象定义 (2)blob对象说明 (3)blob对象存储的方式 (4)查看blob对象 ...
- js,JQ 图片转换base64 base64转换为file对象,blob对象
//将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...
- uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes
1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...
- JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度
base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...
- Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器
最近项目的文件上传遇到一个问题,就是Taro的chooseImage传给回调的是一个Blob对象,一般来说,上传控件都会导出Data Url,而Taro给了一个Blob Url,问题在于,我直接令im ...
随机推荐
- Python基础之内置方法
目录 字符串的内置方法 按索引取值 切片(顾头不顾尾,步长) 长度len 成员运算 移除两边空白strip 切分split 循环 lower&upper startswith & en ...
- Kubernetes安全策略
Kubernetes CIS Benchmark 见kube-bench 1.安全策略 1.1 使用宿主节点的命名空间 命名空间分 网络命名空间 PID命名空间 IPC命名空间 Pod使用主机的网络命 ...
- NOIP 2008 笨小猴
洛谷 P1125 笨小猴 洛谷传送门 JDOJ 1539: [NOIP2008]笨小猴 T1 JDOJ传送门 Description 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到 ...
- selenium 加载出新的窗口
加载出新的窗口的时候 在点击某一个按钮的时候 有些时候会加载出新的页面 此时直接定位是定位不到的 就比如一开始在 1窗口定位 后来跳转到了2窗口,需要在2窗口上定位元素,此时就要先切换到2窗口 这里引 ...
- Vue 生成PDF并下载
实现原理 该功能原理是将页面转化伟canvas在把canvas转化为base64数据 最后将数据通过pdf.js生成下载,故需要和html2canvas一起使用 友情提醒这个pdf下载不能在app里直 ...
- Spring Data学习中心
Spring Data 概览 Spring Data的使命是为数据访问提供熟悉且一致的基于Spring的编程模型,同时仍保留底层数据存储的特殊特性. 它使数据访问技术,关系数据库和非关系数据库,map ...
- innerHTML, innerText, outerHTML, outerText的区别
innerHTML:返回标签内部嵌套的子元素的所有html标签+文本内容content. innerText:返回标签内部嵌套的子元素的文本内容content. outerHTML:返回标签本身+嵌套 ...
- C语言博客作业2019-04--数组
0.展示PTA总分(0----2) 展示3张关于"数组题目集"分数截图. 1.本章学习总结(2分) 1.1 学习内容总结 整理数组这章学习主要知识点,必须包含内容有: 数组中如何查 ...
- centos7中将tomcat注册为系统服务
一.准备环境 操作系统:CentOS Linux release 7.6.1810 (Core) tomcat:apache-tomcat-8.5.41.tar.gz 二.编辑catalina.sh ...
- docker 修改gwbridge ip address
docker_gwbridge介绍 docker_gwbridge接口为使用多主机群覆盖网络的所有容器和任务提供默认网关功能.它是在每个Docker主机上创建的,当它们加入集群时.如果接口docker ...