base64转文件（blob）遇到的一个问题

最新推荐文章于 2024-01-20 10:34:48 发布
原创 最新推荐文章于 2024-01-20 10:34:48 发布 · 3.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文探讨了在编码过程中遇到的'atob'解码错误，指出问题在于忽略Base64字符串前的数据标识部分。通过分析'HelloWorld!'的Base64编码与解码示例，理解了Base64编码的基本用法。同时，对比了图片Base64编码的特点，强调在处理图片时只需关注字符串尾部的Base64数据。并提供了正确提取图片Base64数据的方法。

在过程中，发现报错如下：

failed to execute 'atob' on 'window': the string to be decoded is not correctly encoded.

后来在看atob和btoa的demo时发现base64字符串仅仅是后面的乱七八糟字符串好吗，没有前面的名片。

var str = "Hello World!";
var enc = window.btoa(str);
var dec = window.atob(enc);

var res = "Encoded String: " + enc + "
" + "Decoded String: " + dec;

The result of res will be:

Encoded String: SGVsbG8gV29ybGQh //看这里！！！！
Decoded String: Hello World!

而图片的base64是这样的：

data:image/gif;base64,/9j/4AAQSkZJRgABAQ........

所以只要后面的就可以了：

b64DataStr.substring(b64DataStr.indexOf(',') + 1)

emailboxbox
关注
Failed to execute ‘atob‘ on ‘Window‘: The string to be decoded is not correctly encode解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
12-25 1万+
这个错误消息是JavaScript中的一个常见错误，它发生在你尝试使用atob()函数解码一个不是有效Base64编码的字符串时。atob()函数用于将一个Base64编码的字符串解码为二进制数据。atob()atob()这个函数会先检查输入字符串是否是有效的Base64编码，如果不是，就会抛出一个错误。然后，它会检查输入字符串的长度是否是4的倍数，如果不是，就会在其后添加等号’='，使其长度成为4的倍数。最后，它会调用atob()函数来解码输入字符串。
uni-app - 将 base64 图片编码转为 Blob 本地文件路径（把base64类型的图片，转换成blob二进制文件流）适用于 uni-app / vue.js / JavaScript
🏆 前端领域优质创作者
11-26 1万+
uni-app/vue.js/JavaScript将base64转Blob，uniappapp端如何将图片的base64编码转换成File对象或Blob，uni-app/vue.js/JavaScript中拿到base64转blob对象，uniapp图片base64格式转blob格式方法，uniapp上传图片压缩转base64码与base64转图片路径，Base64/Blob/File图片文件转换，url、base64、blob相互转换方法，读取本地文件为Base64并转成B
Failed to execute ‘atob‘ on ‘Window‘: The string to be decoded is not correctly encoded.报错解决
jiangjunyuan168的博客
01-20 3701
根据报错提示不难看出，是需要...
vue base64文件转pdf
qq_35430000的博客
12-07 1773
//best64转Blob const dataURLtoBlob = function (baseData) { var bstr = atob(baseData) var n = bstr.length; var u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: `application/pdf;char.
Failed to execute ‘atob‘ on ‘Window‘: The string to be decoded is base64转blob,base64转file下载
qq_51389137的博客
06-09 1027
这种base64和常见的编码不同需要decodeURIComponent转译。错误因为atob解码失败。
js base64解码JWT失败：VM273:1 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to
热门推荐
小末的博客
01-20 3万+
前端获取后端服务生成JWT，利用js方法base64解码payload段： window.atob("eyJzdWIiOiJ0ZXN0MyIsInVzZXJJZCI6IjEwMTY5MiIsIm5hbWUiOiLmtYvor5V0ZXN0M-a1i-ivlSIsImV4cCI6MTU3OTUxMTY0OH0"); 结果报错： VM273:1 Uncaught DOMException: ...
将Base64图片转为Blob文件流
weixin_42326052的博客
09-18 5116
在项目中遇到h5调用app的方法返回base64格式的图片给h5，这时候我们通常都需要把其转化为文件流的格式再上传到后端服务器上。 在企业微信的sdk中ios获取的base64会多加一个前缀，所以下面的方法分为两种，一种为处理普通的base64，一种为处理企业微信ios返回的base64 /** * 将以base64的图片url数据转换为Blob * 用url方式表示的base64图片数据 * isWx:是否为企业微信 */ let base64 = {
image-tools图像转换工具，可用于图像和base64的转换
01-09
总的来说，【image-tools】是一个适用于多种平台的图像处理库，其核心功能在于base64与图像文件之间的灵活转换。对于需要在前端环境中处理图像的开发者来说，这是一个不可或缺的工具。使用它，你可以轻松地在不同的...
Base64转二进制文件流以及转File、图片转Base64、二进制流转Base64
卿本无忧的博客
03-29 2万+
前端 Base64转二进制文件流以及转File 图片转Base64 二进制流转Base64
图片转-base64-上传示例-3个示例演示.rar
05-31
1. **Base64编码原理**：Base64编码是一种基于64个字符的编码方式，这些字符包括大小写字母、数字和两个特殊字符('+', '/')，以及一个等于号'='。Base64编码将每3个字节的二进制数据转换为4个Base64字符，如果原始...
调用EasyCVR平台base64编码接口转换图片，格式出现异常是什么原因？
EasyCVR视频融合云平台的技术博客
05-24 368
原来是用户调用接口过程没有将图片进行编码，进行编码后调用成功。
转换Base64编码报错Uncaught DOMException: Failed to execute ‘btoa‘ on ‘Window‘: The string to be encoded co
橙-极纪元-JJYCheng
01-02 2067
转换Base64编码报错Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
Failed to execute atob on Window
liyichuanZhengzhou的博客
05-28 1万+
解决方案：去掉 base64 中开头的 data:image/png;base64, 即可。
Base64报错：Uncaught DOMException: Failed to execute ‘btoa‘ on ‘Window‘: The string to be encoded conta
live的专栏
01-27 6396
Base64报错：Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. 原因：Base64不支持中文转码 解决方案：先进行url转码，再进行Base64转码 转换过程示意： str --> uriStr --> uriBase64Str --> uriStr -->
Base64与PDF互转相关问题
a1051031961的博客
09-06 1509
问题1：MAVEN编译时报“BASE64Encoder是内部专用API，可能会在未来发行版中删除”的黄色警告 sun.misc.BASE64Encoder方法会导致MAVEN编译时报“BASE64Encoder是内部专用API，可能会在未来发行版中删除”的黄色警告。于是我寻找了其他的base编码工具类，例如： org.apache.commons.codec.binary.Base64 这个工具类。 问题2：IDEA无法识别org.apache.com...
base64ToFile
weixin_60513652的博客
01-12 978
上传图片时候有时候要进行裁剪，裁剪完成后的格式是base64，后端一般要formdata格式，我们就要先转file流格式然后在formdata格式 转file base64ToFile(base64, fileName) { const arr = base64.split(","); const type = arr[0].match(/:(.*?);/)[1]; const bstr = atob(arr[1]); let n = bstr.leng
Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec
weixin_44819874的博客
03-11 2万+
在console出现了标题这段报错，原因是编码的字符串中含有“-”或者“_”。解决办法如下： // 将上面这段改为下面这段代码 //var bstr = atob(arr[1]); var bstr = decodeURIComponent(escape(atob(arr[1])));
Uncaught DONException: Failed to execute ‘atob‘ on “window ‘: The string to be decoded is not carrec...
jyf_568的博客
09-22 1万+
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU.... 报错是因为没有去除data:image/png;base64,应只要后面的文件流 1. base64 ： 可以直接当作链接地址使用 1 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABGU.... 2. F...
atob解码图片base64时候报错
phillip318的专栏
05-22 1万+
最近在改一个bug， 使用图片的base64编码 进行压缩时一直报错，Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded 深入查看原因后，发现是base64 在被传入 atob函数时报的错误， atob有过初略的了解应该是解码之类的函数，那应该错误的原因就是解码失败了。 经过多次调试，发现了问题所在， 正常情况如上图 是可以使用atob解码 base64的 但..
base64 转文件
最新发布
03-21
<think>好的，我现在需要帮助用户了解如何将Base64转换为文件。首先，我应该回顾Base64编码的基本概念，确保自己理解正确。Base64是一种将二进制数据编码成ASCII字符串的方法，常用于在文本协议中传输二进制文件，比如电子邮件或网页中的图片。 接下来，用户可能想知道转换的具体步骤。首先需要明确Base64字符串的来源，可能是用户输入、API响应或者文件读取。处理时需要考虑字符串是否包含前缀，比如“data:image/png;base64,”，如果有的话需要先去除这部分，只保留编码后的数据部分。 然后，转换的核心步骤是将Base64字符串解码为二进制数据。不同的编程语言有不同的实现方式，比如Python使用base64模块的b64decode函数，JavaScript可以用atob函数，但要注意处理Unicode字符串的问题。需要提醒用户处理可能的异常，比如无效字符或格式错误。 接下来是将解码后的二进制数据保存为文件。这里要分情况讨论，如果是保存到本地文件系统，可能需要指定路径和文件名，并确保有写入权限。如果是网页环境，可能需要通过Blob对象和URL.createObjectURL来生成下载链接。不同场景下的实现方式不同，需要分别说明。 还需要考虑文件类型的问题。Base64数据本身不包含文件类型信息，用户需要知道原始文件的MIME类型，或者在数据URI中提取。例如，从“data:image/png;base64,...”可以得知是PNG图片，保存时需要正确的扩展名。 另外，可能存在的错误处理也是重点。比如Base64字符串长度必须是4的倍数，否则需要补上等号填充。用户可能遇到字符串截断或编码错误的情况，应该建议他们验证输入的有效性。 最后，可能需要提供一个简单的示例，比如用Python或JavaScript写一个转换的代码片段，帮助用户更直观地理解步骤。同时，提醒用户注意安全性，特别是处理来自不可信来源的数据时，防止恶意文件执行或注入攻击。 总结整个思考过程，需要分步骤解释Base64转文件的流程，涵盖不同编程环境，强调注意事项和常见问题，确保用户能够安全有效地完成转换。</think>Base64转文件的过程可分为四个步骤，以下是详细说明和注意事项： 1. 理解Base64编码原理 - 编码方式：将二进制数据按每3字节（24位）分割为4组6位数据 - 字符集：使用A-Z、a-z、0-9共62个字符，外加`+`和`/`，`=`用于末尾填充 - 示例：二进制`01001101 01100001 01101110` → 转换为"TWFu" 2. 预处理Base64字符串 ```python # 示例：处理含前缀的Base64 encoded_str = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." if "," in encoded_str: header, data = encoded_str.split(",", 1) # 可提取MIME类型：header.split(":")[1].split(";")[0] ``` 3. 解码与转换（不同语言实现） ▎Python示例 ```python import base64 def base64_to_file(b64_str, output_path): try: # 解码时自动处理填充符 binary_data = base64.b64decode(b64_str) with open(output_path, "wb") as f: f.write(binary_data) return True except Exception as e: print(f"解码失败：{str(e)}") return False ``` ▎JavaScript示例 ```javascript function base64ToFile(b64Data, fileName) { // 处理包含MIME类型的Base64 const byteCharacters = atob(b64Data.split(",")[1]); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new File([byteArray], fileName, {type: 'image/png'}); } ``` 4. 关键注意事项 - 字符验证：使用正则验证有效性 ```regex ^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$ ``` - 文件类型识别：建议通过MIME类型映射扩展名 ```python mime_map = { "image/png": ".png", "application/pdf": ".pdf", "audio/mpeg": ".mp3" } ``` - 内存管理：大文件处理建议使用流式解码 ```python from base64 import b64decode with open("largefile.bin", "wb") as f: for chunk in b64decode_stream(b64_stream): # 需自定义分块读取 f.write(chunk) ``` 5. 安全建议 - 限制最大解码尺寸（如：≤10MB） - 使用沙箱环境处理不可信数据 - 验证文件头签名（防止扩展名欺骗） ```python import magic def validate_file(path): mime = magic.from_file(path, mime=True) if not mime.startswith("image/"): os.remove(path) raise ValueError("禁止的文件类型") ``` 实际应用中，建议使用成熟库处理边界情况（如自动填充`=`符号）。对性能敏感场景，可考虑WebAssembly加速解码，速度可提升3-5倍。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值