首页 > 其他分享 >base64转file文件的两种方式

base64转file文件的两种方式

时间:2024-04-30 15:11:25浏览次数:17  
标签:文件 arr base64 blob file bstr new

base64加载图片文件

使用base64可以不发送请求将图片文件转换为base64格式的链接渲染到图片上,减少服务器访问次数,下面是base64加载图片的方式

document.getElementById("front-file").onchange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const imgURL = reader.result;
    const img = new Image();
    img.src = imgURL;
    document.getElementById("front-pic").setAttribute("src", imgURL);
  };
  reader.readAsDataURL(file);
};

base64转file文件

项目中需要实现把图片的base64编码转成file文件的功能,然后再上传至服务器。

有两种方法:

1.直接通过new File()的方式进行转换
(注:new File()方法不兼容ios系统)

//将base64转换为文件
dataURLtoFile(dataurl, filename) { 
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}
 
//调用
var file = dataURLtoFile(base64Data, imgName);

2.将base64转成blob ——> blob转成file
(注:此方法不存在浏览器兼容问题)

//将base64转换为blob
dataURLtoBlob(dataurl) { 
    var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
 
//将blob转换为file
blobToFile(theBlob, fileName){
   theBlob.lastModifiedDate = new Date();
   theBlob.name = fileName;
   return theBlob;
},
//调用
var blob = dataURLtoBlob(base64Data);
var file = blobToFile(blob, imgName);

标签:文件,arr,base64,blob,file,bstr,new
From: https://www.cnblogs.com/ZerlinM/p/18168055

相关文章

  • 好用的自动同步软件:FreeFileSync
    最近研究怎么能够将文件从电脑上自动备份到移动硬盘,发现了很多人都在安利的FreeFileSync(官网:FreeFileSync )FreeFileSync​freefilesync.org/这是一个免费软件,在各个系统中都有提供安装包。软件安装过程非常简单,目前我将其直接安装到了C盘,安装好后即可看到两个软件:绿色的FreeFil......
  • 代码修改pdf文件
    上篇说在python修改pdf上很费了些周张,效果却了了,看着网上连绵不绝的在线pdf编辑网站,疑是有钱赚的地不给草民磨推。其一,发现用记事本打印输出的pdf文件,用PyPDF2,pdfplumber,都是可以获取文本信息,并用replace方法修改,vscode其其它增强文本编辑器,用的也是MicrosoftPrinttoPDF,输出的......
  • Go语言常用标准库——json、文件操作、template、依赖管理及Go_module使用
    文章目录Go语言之jsonMarshal函数Unmarshal函数Go语言之文件操作打开和关闭文件读取文件file.Read()基本使用循环读取bufio读取文件ioutil读取整个文件文件写入操作Write和WriteStringbufio.NewWriterioutil.WriteFile练习copyFile实现一个cat命令template模板模板示例依......
  • Go语言系列——自定义错误、panic和recover、函数是一等公民(头等函数)、反射、读取文件
    文章目录31-自定义错误使用New函数创建自定义错误使用Errorf给错误添加更多信息使用结构体类型和字段提供错误的更多信息使用结构体类型的方法来提供错误的更多信息32-panic和recover什么是panic?什么时候应该使用panic?panic示例发生panic时的deferrecoverpanic,re......
  • 在鼠标右键菜单中新增新建Markdown文件选项(VSCode)
    引言正常情况下,我们新建md文件有两种方式:一是通过Markdown编辑器新建,二是新建txt文件再修改后缀。但是在Windows系统中,我们可以通过修改注册表来新增右键菜单选项。这里我们可以通过修改注册表来新增新建Markdown文件选项,这样可以减少新建文件的繁琐操作。下面就来演示在Window......
  • mu38中ts 文件伪装成png 文件解析~
    正常的文件m3u8应该这样子但是有的却是这个样子于是百度一波我个人任务合理的......
  • python 对文件夹重命名
    importosdefrename_folders(root_dir,level=1,parent_prefix=''):#计数器,用于生成唯一的名称counter=1#遍历文件夹fordirpath,dirnames,filenamesinos.walk(root_dir):#只处理文件夹(不处理文件)......
  • uniapp将图片base64绘制到画布中
     html<viewclass="content"><canvascanvas-id="myCanvas"style="width:300px;height:300px;"></canvas></view> js//获取图片的完整base64this.qrurl=res.data......
  • zabbi添加自定义监控项——检查文件是否存在
    1、检查脚本D:/check.pyimportosimportdatetimeimportargparse#获取文件名parser=argparse.ArgumentParser()parser.add_argument('filename')args=parser.parse_args()file_name=args.filename#获取今天日期today=datetime.datetime.today().strftime......
  • openGauss 配置文件参考
    配置文件参考表1参数说明参数名称描述取值范围local表示这条记录只接受通过Unix域套接字进行的连接。没有这种类型的记录,就不允许Unix域套接字的连接。只有在从服务器本机使用gsql连接且在不指定-h参数的情况下,才是通过Unix域套接字连接。-host表示这条记......