Base64 转 File （附下载）

问题

当需要下载已经上传的文件时，后端太烂不愿意做，就只传了base64，然后丢给我们，这时候应该怎么办，这里有两个解决方法
1、打一顿就好了
2、老实自己写吧...

解决

1、先吧base64转换为File
通常base64的格式是 data:image/jpeg;base64,iVBORw0KGgoAAAANSU·······
前半截的粉色部分是不需要的包括逗号，后半截的才能转成File

const convertFile = base64 => {let fileArray = base64.split(','),// 过滤出文件类型fileType = fileArray[0].match(/:(.*?);/)[1],// atob 是对经过 base-64 编码的字符串进行解码bstr = atob(fileArray[1]),n = bstr.length,//Uint8Array 数组类型表示一个 8 位无符号整型数组u8arr = new Uint8Array(n)while (n--) {// 返回字符串n个字符的 Unicode 编码u8arr[n] = bstr.charCodeAt(n)}// return new Blob([u8arr], { type: fileType })return new File([u8arr], '文件名', { type: fileType })
}

Blob和File 差不多看自己需要
至此已经成功转换，当然想要下载还没有完成

2、这个时候我们就可以通过 a 标签的特性来进行下文件

const buttonClick = (base64) => {//拿到转码后的 file 格式let file = dataURLtoFile(base64)// 动态创建 a 标签const node = document.createElement('a')// 静态方法会创建一个 DOMStringnode.href = URL.createObjectURL(file)// 下载的文件名node.download = file.name// 模拟点击下载node.click()// 释放刚刚创建的 DOMStringURL.revokeObjectURL(node.href)//这里我吧它插入到了 body 里因为不查vue里面会报错，说子节点中不存在document.body.appendChild(node)// 删除 a 标签document.body.removeChild(node)
}

好了，完成，CV不容易呐，说实话 u8arr = new Uint8Array(n) 和 while 这里我还是不太清楚这含义，有无大佬给小弟讲解一下，‘ 肾 ’是感谢！

Base64 转 File （附下载）相关推荐

CTF常用脚本工具（附下载地址）
该项目主要记录CTF中用到的工具 Base base64解码输出字节文本 base64隐写加密与解密 base64连续解码 Base64扩展 base64字符替换表 B64-B32-B16解密 b16 ...
Rust 在这个领域要大放异彩：一本新书推荐（附下载）
以下内容来源于逆锋起笔,关注每日干货及时送达据说学 Rust 的人中,有不少是前端的,主要是很多前端工具链采用 Rust 重写.不仅如此,终端命令工具,也有很多 Rust 的轮子.所以,学学 Rus ...
文件格式相互转换（base64转File等）
前言:若项目中附件上传组件只能拿到文件的base64编码,而后台要的是File对象,在没办法使用其他上传组件的情况下,可以在拿到base64编码后转换成后台需要的格式. 附:图片转BASE64编码工具 ...
图片base64，file,blob格式的相互转换，以及gif转base64
图片base64,file,blob格式的相互转换,以及gif转base64(第六点) 1.new Image()图片链接转base64 只能转化为普通的jpg/png图片.无法转化gif图 type ...
将图片（路径）转换为Base64 和将base64转换为file类型
var image={/* 将图片(路径)转换为Base64 */getBase64FromImageURL(url, callback) {var canvas = document.createE ...
【强烈推荐】国土档案管理信息系统产品使用说明书系列目录【附下载地址】...
<<国土档案管理信息系统>> 产品使用说明书系列目录 [附下载地址] --通过知识共享树立个人品牌. <国土档案管理信息系统>在线视频讲解一.记大型商业软件< ...
销量过亿的《剑指0ffer》题目和答案电子书 (附下载)
如果有人问面试前该看哪些题,有什么书籍可以推荐,那么<剑指offer>一定必读不可,这本书书豆瓣评分高达 9.0 ,非常适合集中时间阅读.电子书下载 1.扫码关注「顶级架构师」订阅号 2. ...
R语言使用download.file函数下载网络文件到本地（Download File from the Internet）
R语言使用download.file函数下载网络文件到本地(Download File from the Internet) 目录 R语言使用download.file函数下载网络文件到本地(Down ...
干货 | 吴恩达亲自为这份深度学习专项课程精炼图笔记点了赞！（附下载）
来源:机器之心.AI有道本文约7500字,建议阅读10+分钟. 本文整理了深度学习基础.卷积网络和循环网络的学习笔记,附下载哦~ [ 导读 ]吴恩达在推特上展示了一份由 TessFerrandez ...

Base64 转 File （附下载）

问题

解决

Base64 转 File （附下载）相关推荐

最新文章

热门文章