Base64编码转为文件

在JavaScript中,将Base64编码的字符串转换为文件通常涉及几个步骤。这通常涉及到创建一个Blob对象,然后使用这个Blob对象来创建一个文件。以下是一个简单的示例,说明如何将Base64字符串转换为文件:

javascript
function base64ToBlob(base64Data, contentType) {
const sliceSize = 1024;
const byteCharacters = atob(base64Data);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {  const slice = byteCharacters.slice(offset, offset + sliceSize);  const byteNumbers = new Array(slice.length);  for (let i = 0; i < slice.length; i++) {  byteNumbers[i] = slice.charCodeAt(i);  }  const byteArray = new Uint8Array(byteNumbers);  byteArrays.push(byteArray);  
}  const blob = new Blob(byteArrays, {type: contentType});  
return blob;  

}

function base64ToFile(base64Data, fileName, contentType = ‘application/octet-stream’) {
const blob = base64ToBlob(base64Data, contentType);
const file = new File([blob], fileName, { type: contentType });
return file;
}

// 使用示例
const base64String = ‘data:image/png;base64,iVBORw0KG…’; // 你的Base64字符串
const fileName = ‘example.png’; // 你想要的文件名
const contentType = ‘image/png’; // 文件的内容类型

const file = base64ToFile(base64String.split(‘,’)[1], fileName, contentType);

// 现在你可以使用这个文件对象,比如通过表单上传,或者通过URL.createObjectURL来预览图片等。

// 示例:创建图片的URL
const imageUrl = URL.createObjectURL(file);

// 在浏览器中显示图片
const imgElement = document.createElement(‘img’);
imgElement.src = imageUrl;
document.body.appendChild(imgElement);

// 清理URL资源
imgElement.onload = function() {
URL.revokeObjectURL(imageUrl);
};
在这个示例中,
base64ToBlob
函数将Base64字符串转换为一个Blob对象,而
base64ToFile
函数则进一步将这个Blob对象封装成一个File对象。File对象通常用于表示用户选择的文件,但也可以在这里用来表示从Base64字符串创建的文件。

请注意,Base64字符串通常包含数据URI方案的前缀(例如
data:image/png;base64,
),因此在传递给
base64ToFile
函数之前,你需要通过
split(‘,’)[1]
去掉这个前缀。

最后,通过
URL.createObjectURL
方法,你可以创建一个指向Blob或File对象的URL,这个URL可以直接用于在

元素中显示图片,或者用于其他需要文件URL的场景。记住在图片加载完成后调用
URL.revokeObjectURL
来释放资源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/781840.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thread常用的方法及线程状态原因解析

温馨提示&#xff1a;PC端观看&#xff0c;效果更佳&#xff01; 本文两大部分&#xff1a;介绍一些Thread线程常用的方法&#xff0c;和解析线程的六大状态&#xff01; 目录 一、线程常用的方法 介绍Thread类 1.开启线程 2.获取线程引用 3.休眠线程 4.中断线程 3.等待…

【ERP原理与应用】用友U8实验

实验一、系统管理与基础设置 实验内容&#xff1a; 一、核算体系的建立 好友软件公司是一家软件制造和系统集成企业&#xff0c;其产品面向国内外市场&#xff0c;自 2019 年 3 月公司开始使用 ERP 软件管理业务。软件操作员有三位&#xff0c;黄红是账套 主管&#xff0c;张…

mysql进阶知识总结

1.存储引擎 1.1MySQL体系结构 1).连接层 最上层是一些客户端和链接服务&#xff0c;包含本地sock通信和大多数基于客户端/服务端工具实现的类似于TCP/IP的通信。主要完成一些类似于连接处理、授权认证、及相关的安全方案。在该层上引入了线程池的概念&#xff0c;为通过认证…

C# 异步和线程的区别

在C#中&#xff0c;异步编程主要是通过async和await关键字来实现的&#xff0c;目的是使异步代码看起来像同步代码。异步操作不会阻塞调用线程&#xff0c;而是使用事件或回调来通知完成。 与此不同&#xff0c;线程处理是更底层的概念&#xff0c;它允许你创建和管理独立执行…

机器学习基础——模型评估与选择(部分)

目录 一、前言&#xff1a;误差与拟合 &#xff08;一&#xff09;经验误差 &#xff08;二&#xff09;过拟合、欠拟合 二、评估方法 &#xff08;一&#xff09;评估总体的思路 &#xff08;二&#xff09;如何划分训练集和测试集 1.留出法 2.k折交叉验证 3.自助法 …

springboot基本使用八(mbatisplus+filter实现登录功能)

mybatisplus依赖&#xff1a; <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version> </dependency> mysql依赖&#xff1a; <dependency><grou…

设计模式(5):原型模式

一.原型模式 通过 n e w 产生一个对象需要非常繁琐的数据准备或访问权限&#xff0c;则可以使用原型模式。 \color{red}{通过new产生一个对象需要非常繁琐的数据准备或访问权限&#xff0c;则可以使用原型模式。} 通过new产生一个对象需要非常繁琐的数据准备或访问权限&#xf…

代码学习记录31---动态规划开始

随想录日记part31 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.29 主要内容&#xff1a;今天开始要学习动态规划的相关知识了&#xff0c;今天的内容主要涉及四个方面&#xff1a; 理论基础 ; 斐波那契数 ;爬楼梯 ;使用最小花费爬楼梯。 理论基础 509. 斐…

SQLServer sys.default_constraints介绍

sys.default_constraints 是 SQL Server 的系统视图&#xff0c;它包含了数据库中所有默认约束的信息。默认约束是数据库对象&#xff08;如表中的列&#xff09;的约束&#xff0c;它为列定义了一个默认值&#xff0c;当在插入新行时没有为该列提供值时&#xff0c;将使用这个…

【保姆级教程】DeepLabV3+语义分割:训练自己的数据集

一、DeepLabV3图像语义分割原理 DeepLabV3架构采用扩张卷积&#xff08;也称为空洞卷积&#xff09;来捕捉多尺度信息&#xff0c;从而在不损失空间分辨率的情况下实现对图像的精细分割。 二、DeepLabV3代码及预训练权重下载 2.1 下载deeplabv3代码 这里使用的是B站大佬Bu…

axios+springboot上传图片到本地(vue)

结果&#xff1a; 前端文件&#xff1a; <template> <div> <input type"file" id"file" ref"file" v-on:change"handleFileUpload()"/> <button click"submitFile">上传</button> </div&g…

基于ssm的留学生交流互动论坛网站(java项目+文档)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的留学生交流互动论坛网站。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 留学生交流互动论坛网站…

如何做一个知识博主? 思考 + 提问

如何将一件事情思考清楚&#xff1f; 能从全局出发去思考&#xff0c;而非局部&#xff0c;脑子更为开放而非局限做事情依赖逻辑&#xff0c;也依赖自己的直觉兼具理性和充满情感有事情有很强的好奇心了解自己的动机&#xff0c;并且将动机转化为很强的力量 [行动力]大胆假设小…

Solana 2024 投资新风口:挖掘 DeFi、硬件开发与交易创新

将区块链的技术红利带给所有用户&#xff0c;Solana 自 2017 年诞生以来就致力于赋予开发者、消费者、投资人等各路人士的优越应用体验。在“以太坊杀手”林立的公链竞争阶段&#xff0c;Solana 凭借高性能公链的独特定位&#xff0c;朝着去中心化、安全性、低成本的目标不断精…

刷爆LeetCode:两数之和 【1/1000 第一题】

&#x1f464;作者介绍&#xff1a;10年大厂数据\经营分析经验&#xff0c;现任大厂数据部门负责人。 会一些的技术&#xff1a;数据分析、算法、SQL、大数据相关、python 作者专栏每日更新&#xff1a;LeetCode解锁1000题: 打怪升级之旅https://blog.csdn.net/cciehl/category…

设计模式之建造者模式精讲

也叫生成器模式。将一个复杂的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 在建造者模式中&#xff0c;有如下4个角色&#xff1a; 抽象建造者&#xff08;Builder&#xff09;&#xff1a;用于规范产品的各个组成部分&#xff0c;并进行抽象&…

c++使用类的一些注意事项

前言&#xff1a; 本篇内容为前面的补充&#xff0c;介绍了我们使用类时需要注意些什么以及一些编译器的优化&#xff0c;可能有些理解不到位或者错误&#xff0c;请斧正。 目录 前言&#xff1a; 1.再谈构造函数 2.&#xff08;c98&#xff09;隐式类型转换中的编译器的优…

【BlossomRPC】服务暴露与发现

文章目录 RPC项目 配置中心项目 网关项目 与传统RPC框架一样&#xff0c;我们需要保证我们的服务是能被发现的。 也就是说&#xff0c;我希望通过一种简单的方式&#xff0c;就能将我们的服务暴露出去&#xff0c;使得其他服务可以方便的去依赖这个服务。 因此&#xff0c;我…

Codeforces Round 934 (Div. 2) D. Non-Palindromic Substring

题目 思路&#xff1a; #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e6 5, inf 1e9, maxm 4e4 5; co…

JavaScript如何制作轮播图

在JavaScript中实现轮播图可以通过多种方式&#xff0c;但最常见的方式是使用数组来存储图片&#xff0c;然后使用setInterval函数定期更改显示的图片。下面是一个简单的例子&#xff1a; 首先&#xff0c;你需要在HTML中设置一些用于显示图片的<img>标签&#xff0c;以…