一、文件转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. Comet OJ - Contest #2题解

    传送门 既然没参加过就没有什么小裙子不小裙子的了-- 顺便全是概率期望真是劲啊-- 因自过去而至的残响起舞 \(k\)增长非常快,大力模拟一下就行了 int main(){ scanf("% ...

  2. Java Scanner语法

    1.导入: import java.util.Scanner; 2.创建对象 Scanner scan = new Scanner(System.in);//一般变量名为scan或者in 最后关闭,s ...

  3. es4x 调用其他三方jar 包

    es4x 使用了graalvm 作为运行时环境,所以即拥有vertx 的强大,又拥有了与java 代码便捷的通信能力 以下是一个简单的测试,同时也简单说明下es4x 的es4x-launcher.ja ...

  4. Generating YouTube-like IDs in Postgres using PL/V8 and Hashids

    转自:https://blog.abevoelker.com/2017-01-03/generating-youtube-like-ids-in-postgres-using-plv8-and-has ...

  5. [RN] React Native 使用 阿里 ant-design

    React Native 使用 阿里 ant-design 实例效果如图: 一.安装 npm install antd-mobile-rn --save npm install babel-plugi ...

  6. vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1

    最近因为电脑太卡,小颖把电脑重装了,重装后再执行 npm install -g @vue/cli 时可能是网络问题,一直不能成功,小颖就把npm指向了淘宝镜像: npm install -g cnpm ...

  7. 【BigData】Java基础_HashSet

    HashSet简介 HashSet是一个集合数据类型,具有以下三个特性: (1)可以存储过个数据对象 (2)HashSet中的数据不能重复 (3)HashSet的数据存储是无序的 HashSet的几个 ...

  8. Gamma阶段第八次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  9. 【python学习案例】python判断自身是否正在运行

    需要引入psutil包: 实现思路: 1)用os.getpid()获取当前程序运行PID,将PID存入文件中 2)用psutil模块获取当前系统所有正在运行的pid 3)读取之前存入的PID,判断该P ...

  10. Spring boot配置文件application.properties和bootstrap.properties的区别

    spring boot 有两种配置文件 (1)application.properties(application.yml) 系统级别的一些参数配置,这些参数一般是不会变动的 (2)bootstrap ...