JS 浏览器中文件转 base64 编码，生成 base64 代码

JS 中将文件转 base 64 只需要 FileReader 的 readAsDataURL(文件) 方法即可

let files = ev.dataTransfer.files;
let fileReader = new FileReader()
let that = this
// onload 方法中使用 this.result 来获取读取文件后的结果值，在这里也就是 base64 代码
// 由于这里需要使用 this.result 来获取内容，所以就不能使用 ()=>{} 这种写法了。
fileReader.onload = function () {that.base64 = this.result
}
fileReader.readAsDataURL(files[0]) // 读第一个文件的内容

结果

最后再说一下它的原理

什么是 Base64 : https://developer.mozilla.org/en-US/docs/Glossary/Base64
什么是 DataURL: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

Base64 本身是一种可以替代文件内容的文本格式数据，给它加一个标准的头部。说明该字符串内容是什么格式的文件。就生成了 DataURL 对象，它可以直接在 <img src="base64" > 中使用

转成 Base64 编码后，文件至少会增大 33%，在上面的文章中有说。

JS 中有自带的将文件内容转为 base64 编码的方法
window.atob()
window.btoa()

由于 window 是浏览器中的顶级对象，所以可以直接在浏览器环境下使用 atob() 或 btoa() 方法。

JS 浏览器中文件转 base64 编码，生成 base64 代码相关推荐

JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
des加密+base64编码，base64解码+des解密
des加密+base64编码,base64解码+des解密 des简单介绍 base64简单介绍运行效果图 TestActivity.java DataEncryptionUtil.java des ...
Base64 编码原理及代码实现
Base64 编码原理及代码实现所谓 base64 编码就是从 ASCII 码表中选取64个可打印字符(A-Za-z0-9+/)作为基本字符集对其它字符进行编码转换.加上作为填充的 "=& ...
server vscode中的live_太方便了！这款神器能在浏览器中运行 VS Code，随时随地写代码...
最近看到 iPadOS 出来了,各种牛逼的操作真的很有吸引力,于是咬咬牙买了 iPad air.买来之后,当然是研究怎么提高效率了,于是就寻找.研究各种高效的软件.折腾了一段时间,各种 APP 都找得 ...
神器推荐！在浏览器中运行 VS Code，随时随地写代码
作者 | zone7 责编 | 刘静瞎比比最近看到 iPadOS 出来了,各种牛逼的操作真的很有吸引力,于是咬咬牙买了 iPad air.买来之后,当然是研究怎么提高效率了,于是就寻找.研究各 ...
图片Base64编码图片Base64在线转换
在线工具https://oktools.net 图片Base64编码https://oktools.net/image2base64 JSON格式化https://oktools.net/json U ...
PHP 图片转base64编码和 base64编码字符串转换成图片保存
1.图片转base64编码: /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ...
推荐一款神器：在浏览器中运行 VS Code，随时随地写代码
点击上方蓝色小字,关注"涛哥聊Python" 重磅干货,第一时间送达目录发现什么都别说,先上图需要什么配置条件? 如何配置? 关于 vscode 的插件配置一个 pyth ...
Base64编码，Base64在线编解码
在线工具https://oktools.net Base64编码https://oktools.net/base64 JSON格式化https://oktools.net/json Unix时间戳ht ...

JS 浏览器中文件转 base64 编码，生成 base64 代码

JS 浏览器中文件转 base64 编码，生成 base64 代码

最后再说一下它的原理

JS 浏览器中文件转 base64 编码，生成 base64 代码相关推荐

最新文章

热门文章

JS 浏览器中 文件转 base64 编码，生成 base64 代码

JS 浏览器中 文件转 base64 编码，生成 base64 代码

最后再说一下它的原理

JS 浏览器中 文件转 base64 编码，生成 base64 代码相关推荐

最新文章

热门文章

JS 浏览器中文件转 base64 编码，生成 base64 代码

JS 浏览器中文件转 base64 编码，生成 base64 代码

JS 浏览器中文件转 base64 编码，生成 base64 代码相关推荐