base64、File、Blob、ArrayBuffer互转【收藏备用】
前端人
共 2435字,需浏览 5分钟
· 2021-03-05
关注公众号 前端人,回复“加群”
添加无广告优质学习群
1. file对象转base64
let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)
2. base64 转成blob 上传
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
3. blob 转成ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
4. buffer 转成blob
let blob = new Blob([buffer])
5. base64 转 file
const base64ConvertFile = function (urlData, filename) { // 64转file
if (typeof urlData != 'string') {
this.$toast("urlData不是字符串")
return;
}
var arr = urlData.split(',')
var type = arr[0].match(/:(.*?);/)[1]
var fileExt = type.split('/')[1]
var bstr = atob(arr[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'filename.' + fileExt, {
type: type
});
}
原文:segmentfault.com/a/1190000039310309
回复 资料包
领取我整理的进阶资料包回复 加群
,加入前端进阶群console.log("文章点赞===文章点在看===你我都快乐")
Bug离我更远了,下班离我更近了
评论
6 个火爆 GitHub 的后台管理模板,快来收藏!
将Python客栈设为“星标⭐”第一时间收到最新资讯今天来给大家介绍6个火爆 G 站的管理后台模板,有了它们,对于前端不是很熟悉的小伙伴来说,再也不用烦恼了,而且有一说一,即使是前端大牛,要想从零开发一套完整的管理模板,也不是一件容易的事情。1. vue-element-admin该项目是基于 Vu
Python客栈
0
110 个 Java 主流组件和框架整理,常用的应有尽有,建议收藏!!
点击关注公众号,Java 干货及时推送↓推荐阅读:铜三铁四,怒拿 35K * 14 薪!整理:四猿外以下排序是按照从技术组件到开发框架到代码工具,也有一些实在不好分类的,就放到最后了。WEB 容器Tomcathttps://tomcat.apache.org/Jettyhttps://ww
Java技术栈
0
600个常用 Linux 命令,收藏备用!
本文为Linux命令大全 ,从A到Z都有总结,建议大家收藏以便查用,或者查漏补缺!A命令描述access用于检查调用程序是否可以访问指定的文件,用于检查文件是否存在accton用于打开或关闭记帐进程或更改信息进程记帐文件aclocal用于从configure.in文件自动生成aclocal.m4文件
程序IT圈
0
20个惊艳的React组件库,每一个都值得收藏
在上一篇文章中,20个惊艳的React组件库,每一个都值得收藏(上),我们一起探索了10款令人惊艳的React组件库,它们各自以独特的功能和优势,极大地丰富了我们的React开发工具箱。今天,我们将继续这一系列的分享,从React Markdown到React Copy to Clipboard,为
前端迷
10
收藏 | 论文画图工具:25个常用Matplotlib图的Python代码总结
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达仅作学术分享,不代表本公众号立场,侵权联系删除转载于:作者丨zsx_yiyiyi来源丨python大本营编辑丨极市平台# !pip install brewer2mplimport nump
小白学视觉
342
微服务架构中常用的多级缓存设计,建议收藏!
今天我们来聊聊缓存这个话题,看看在微服务环境下如何设计有效的多级缓存架构。主要涉及三方面内容:Web 应用的客户端缓存;应用层静态资源缓存;服务层多级缓存。首先,咱们先讲解微服务架构的多级缓存设计。微服务架构中的多级缓存设计提到缓存,想必每一位软件工程师都不陌生,它是目前架构设计中提高性能最直接的方
Java专栏
546
微服务架构中10个常用的设计模式,建议收藏!
来源:网络👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:http://116.62.199.48/ ,新项目
小哈学Java
10
Linux中Limit相关内容设置大全(值得收藏)
一、 /etc/security/limits.conf 详解/etc/security/limits.conf 文件实际是 Linux PAM(插入式认证模块,Pluggable Authentication Modules)中 pam_limits.so 的配置文件,而且只针对于...
马哥Linux运维
0