一、文件转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对象链接的更多相关文章

  1. HTML5新特性之文件和二进制数据的操作 Blob对象

    HTML5新特性之文件和二进制数据的操作 1.Blob对象 2.FileList对象 3.File对象 4.FileReader 对象 5.URL对象

  2. MP4视频流base64数据转成Blob对象

    网上一大堆对图片base64转Blob.File的方法 很少有视频mp4转的,可能是因为原理相同的原因吧!但在项目中针对视频流base64转Blob对象时,花了好长时间才成功,特专门记录一下! APP ...

  3. Base64图片转Blob对象

    //将Base64图片转成Blob对象 //@args: base64Url:编码字符串,contentType:类型. function base64UrltoBlob(base64Url, con ...

  4. [转] Meida视频加密二-Blob对象

    2. blob 1 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107" ...

  5. 『现学现忘』Git对象 — 15、blob对象介绍

    目录 (一)Git对象的存放目录 (二)Git中对象类型 (三)blob对象 1.blob对象说明 (1)blob对象定义 (2)blob对象说明 (3)blob对象存储的方式 (4)查看blob对象 ...

  6. js,JQ 图片转换base64 base64转换为file对象,blob对象

    //将图片转换为Base64 function getImgToBase64(url,callback){ var canvas = document.createElement('canvas'), ...

  7. uniapp中拿到base64转blob对象,或base64转bytes字节数组,io操作写入字节流文件bytes

    1. uniAPP中拿到附件的base64如何操作,如word文件 /*** 实现思路:* 通过native.js的io操作创建文件,拿到平台绝对路径* 再通过原生类进行base64解码,拿到字节流b ...

  8. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  9. Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器

    最近项目的文件上传遇到一个问题,就是Taro的chooseImage传给回调的是一个Blob对象,一般来说,上传控件都会导出Data Url,而Taro给了一个Blob Url,问题在于,我直接令im ...

随机推荐

  1. 解决opencart设置SSL后评论不能翻页的问题

    为了网站的安全和seo,我们为客户的opencart网站添加了SSL加密实现https,并设置了301跳转使http跳到https,基本所有的功能都完好,就是有一点评论分页无法加载分页,去分析了链接源 ...

  2. Kinect v2控制鼠标原理分析和源码

    https://blog.csdn.net/baolinq/article/details/54381284 此程序为利用Kinect v2实现用手指隔空控制鼠标,是我另一个项目的一部分,因为在另外那 ...

  3. VS中的Modules窗口

    当我在别人的机器上调试问题时,我做的第一件事就是查看modules窗口.按版本排序并看到一个不属于的dll可以帮助立即诊断配置问题,并节省许多调试痛苦. 下面介绍下各列的意思: Name:模块名称. ...

  4. gnome3 调整标题栏高度

    适用于:gtk 3.20 + 1. 在用户主目录 -/.config/gtk3.0/ 下新建gtk.css文件: 2. 复制如下css值: headerbar.default-decoration { ...

  5. 归并排序 MergeSort

    今天第一次看懂了严奶奶的代码( ̄▽ ̄)~*,然后按照厌奶那的思路进行了一波coding,稍加调试后即可跑起来. 学习链接:排序七 归并排序.图解排序算法(四)之归并排序 merge函数:将两个有序序列 ...

  6. java插入代码块

    粘贴1: 当代码写到一定程度之后,就会发现很多代码都被重复地敲了N多遍,甚至毫不夸张地说:闭着眼睛都能敲出来.大量地敲这些重复地代码,除了锻炼敲键盘的速度,基本上没有其他益处,但是长期下来会浪费很多时 ...

  7. connect ECONNREFUSED 127.0.0.1:80错误解决

    这个报错也是一直困扰了我许久,服务端一直打印这个报错,但是页面数据响应又都正常,起初真不知道是因为什么原因,能看出来他是在调用80端口, 但是不明白为什么会调用80端口.一度以为是config.js里 ...

  8. 不了解这12个语法糖,别说你会Java!

    阅读本文大概需要 10 分钟. 作者:Hollis 本文从 Java 编译原理角度,深入字节码及 class 文件,抽丝剥茧,了解 Java 中的语法糖原理及用法,帮助大家在学会如何使用 Java 语 ...

  9. springboot修改页面不用重启的设置(idea)

       1) “File” -> “Settings” -> “Build,Execution,Deplyment” -> “Compiler”,选中打勾 “Build project ...

  10. Golang(六)time 包的用法整理

    1. 常用结构体 Duration:type Duration int64,时间长度,对应单位包括 Nanosecond(纳秒).Microsecond(微妙).Millisecond(毫秒).Sec ...