首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在没有FileReader的NodeJS中将Blob转换为Base64

在Node.js中,由于没有内置的FileReader对象,我们需要使用其他方法将Blob转换为Base64

代码语言:javascript
复制
const fs = require('fs');
const util = require('util');
const readFile = util.promisify(fs.readFile);

async function blobToBase64(blobPath) {
  try {
    const data = await readFile(blobPath, 'binary');
    const base64Data = Buffer.from(data, 'binary').toString('base64');
    return base64Data;
  } catch (error) {
    console.error('Error converting blob to base64:', error);
    throw error;
  }
}

// 使用示例
(async () => {
  try {
    const base64Data = await blobToBase64('path/to/your/blob');
    console.log('Base64 data:', base64Data);
  } catch (error) {
    console.error('Error:', error);
  }
})();

在这个示例中,我们首先导入了fsutil模块。然后,我们创建了一个名为blobToBase64的异步函数,该函数接受一个Blob文件路径作为参数。

blobToBase64函数中,我们使用readFile函数以二进制模式读取Blob文件。接着,我们使用Buffer.from()方法将二进制数据转换为Base64编码的字符串。

最后,我们使用一个自执行的异步函数来调用blobToBase64函数,并打印转换后的Base64数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端图片压缩及上传

对象,FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。...就是缓存中的数据了,我们通过new 一个Blob对象,将其转换为Blob对象,然后就可以通过url方法来将其转换为可以放到img src中的链接形式了。...后台接收 在这我才用的示例为nodejs搭建后台来接收图片,这里我们需要一个bodyParser模块 app.use(bodyParser.json({ limit:'5mb'}));//限制允许提交的大小...; } }); }) 接口中我们通过Buffer来将base64转换为buffer,进而保存到服务器本地中,本示例采用的就是将图片保存到服务器本地。...如此通过将base64编码图片保存为图片就做完了。 由于压缩采用的是canvas,获取文件等是通过FileReader 对象及Bolb对象,故此方法目前的兼容性最低为IE10,还请酌情使用。

2.9K20
  • 面试题:我现在上传图片的时候提前预览到图片怎么办?

    **FileReader.readAsBinaryString() ** 开始读取指定的Blob中的内容。一旦完成,result属性中将包含所读取文件的原始二进制数据。...FileReader.readAsText() 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串以表示所读取的文件内容。...FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。...FileReader.readAsDataURL 和URL.createObjectURL区别 1、返回值 FileReader.readAsDataURL(blob)可以得到一段base64的字符串...URL.createObjectURL(blob)得到的是当前文件的一个内存url 2、内存使用 FileReader.readAsDataURL(blob)得到一段超长的base64的字符串

    1.5K10

    H5上传图片

    canvas FileReader FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。...,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。...使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案: server支持,单独开接口处理...base64上传 前端将base64转化成File对象,复用原来的server接口 这里重点讨论第2中方案。...JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。基于此,只需要把base64转化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。

    1.8K100

    H5上传图片

    canvas FileReader FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。...,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。...使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案: server支持,单独开接口处理...base64上传 前端将base64转化成File对象,复用原来的server接口 这里重点讨论第2中方案。...JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。基于此,只需要把base64转化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。

    83210

    手把手教你前端本地文件操作与上传

    可以把base64转化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64转成blob: functionb64toBlob(b64Data...会触发表单提交,当请求完成(成功或者失败)之后就会触发iframe的onload事件,然后在onload事件获取返回的数据,如果请求失败了的话,iframe里的内容就为空,可以用这个判断请求有没有成功。...使用iframe没有办法获取上传进度,使用xhr可以获取当前上传的进度,这个是在XMLHttpRequest 2.0引入的: if(event.lengthComputable){ // 当前上传进度的百分比...事件在event.clipboardData.files里面,Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签,可以通过发送一个请求加载本地的blob数据,然后再通过FileReader...得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。

    1.9K110

    前端本地文件操作与上传

    btoa是把内容转化成base64编码,而atob是把base64还原。在调atob之前,需要把表示内容格式的不属于base64内容的字符串去掉,即上面代码第一行的replace处理。...可以把base64转化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64转成blob: function b64toBlob(b64Data...事件,然后在onload事件获取返回的数据,如果请求失败了的话,iframe里的内容就为空,可以用这个判断请求有没有成功。...事件在event.clipboardData.files里面,Safari这个怪胎是在编辑器里面插入一个src指向本地的img标签,可以通过发送一个请求加载本地的blob数据,然后再通过FileReader...得到的File对象就可以直接添加到FormData里面,如果需要先读取base64格式做处理的,那么可以把处理后的base64转化为blob数据再append到formData里面。

    1.6K20

    Blob

    读完本文你将了解到以下内容: Blob 是什么 Blob API 简介 构造函数 属性和方法 Blob 使用场景 分片上传 从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...3.4 Blob 转换为 Base64 URL.createObjectURL 的一个替代方法是,将 Blob 转换为 base64 编码的字符串。...在 MIME 格式的电子邮件中,base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时,在传输编码方式中指定 base64。...; } }); }); 对于 FileReader 对象来说,除了支持把 Blob/File 对象转换为 Data URL 之外,它还提供了 readAsArrayBuffer...Data URL 格式的图片数据,为了进一步减少传输的数据量,我们可以把它转换为 Blob 对象: function dataUrlToBlob(base64, mimeType) { let bytes

    6.2K40

    你不知道的 Blob

    读完本文你将了解到以下内容: Blob 是什么 Blob API 简介 构造函数 属性和方法 Blob 使用场景 分片上传 从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...3.4 Blob 转换为 Base64 URL.createObjectURL 的一个替代方法是,将 Blob 转换为 base64 编码的字符串。...在 MIME 格式的电子邮件中,base64 可以用来将二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时,在传输编码方式中指定 base64。...Data URL 格式的图片数据,为了进一步减少传输的数据量,我们可以把它转换为 Blob 对象: function dataUrlToBlob(base64, mimeType) { let bytes...Blob 与 ArrayBuffer 对象之间是可以相互转化的: 使用 FileReader 的 readAsArrayBuffer() 方法,可以把 Blob 对象转换为 ArrayBuffer 对象

    4.3K20

    cropperjs图片裁剪及数据提交文件流互相转换详解

    如果将viewMode设置为0,裁剪框可以延伸到画布之外,而值为1、2或3将裁剪框限制为画布的大小。viewMode为2或3将额外将画布限制为容器。当画布和容器的比例相同时,2和3之间没有差异。...首先通过input file拿到的本地展示路径有两种: 1.base64格式 2.url格式 base64获取方式: 通过FileReader实例完成后的onload事件获取 url方式:URL.createObjectURL...function(){ setCutImg (fileList[0].type); // 裁剪函数 } // 转base64...${suffix}`, {type: mime}) }, function dataURLtoBlob(toDataURL) { // base64转blob...: 'text/plain' }) blob.text().then(console.log) // 'hello world' 1 2 FileReader FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件

    41110

    图片压缩原理

    base64 格式 base64 编码的图片通过 Canvas 转换压缩,这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api,一个调节图片的分辨率的,一个是调节图片压缩质量并且输出的...图片转 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 将 File 对象通过 FileReader 的 readAsDataURL 方法转换为...// base64 图片转 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...base64 数据拆分后,通过 atob 方法解码 将解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL

    4.7K31

    Vue解析剪切板图片并实现发送功能

    每一份坚持都是成功的累积,只要相信自己,总会遇到惊喜 前言 我们在使用QQ进行聊天时,从别的地方Ctrl+C一张图片,然后在聊天窗口Ctrl+V,QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里,按下...获取可编辑div容器中的所有子元素 遍历获取到的元素,找出img元素 判断当前img元素是否有alt属性(表情插入时有alt属性), 如果没有alt属性当前元素就是图片 将base64格式的图片转成文件上传至服务器...(此处需要注意:base64转文件时,需要用正则表达式删掉base64图片的前缀),将当前图片地址推送至websocket服务。...前端通过post请求将base64码传到服务端,服务端直接将base64码解析为图片保存至服务器 从下午2点折腾到晚上6点,一直在找Java解析base64图片存到服务器的方案,最终选择了放弃,采用了前端转换方式...,这里的问题大概是前端传base64码到后端时,http请求会进行转义,导致后端解析得到的base64码是错误的,所以一直没有成功。

    1.5K20

    JS 图片压缩

    base64 格式 base64 编码的图片通过 Canvas 转换压缩,这里会用到的 Canvas 的 drawImage 以及 toDataURL 这两个 Api,一个调节图片的分辨率的,一个是调节图片压缩质量并且输出的...图片转 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 将 File 对象通过 FileReader 的 readAsDataURL 方法转换为...// base64 图片转 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...base64 数据拆分后,通过 atob 方法解码 将解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL

    25.8K21

    Canvas 进阶(六)实现图片压缩功能

    实现功能 能够获取压缩后的 base64 图片 能够获取压缩后的图片节点,并能替换文档中的图片节点 能够获取压缩后的 canvas 进行二次绘制,并能替换文档中的 canvas 能过获取压缩后的 blob...获取 canvas 和与页面 canvas 进行替换功能 我们在构建函数中已经将传入的图片加载并赋值给了 this...._compressedImg 指向压缩后的图片,我们的目标是找到 image 的 src 属性,有两种方法 URL.createObjectURL(blob) 和 new FileReader().readAsDataURL..._compressedImg 被赋值且其 src 属性存在时,可以直接创建 a 标签下载;若没有创建压缩后的 img, 则调用上一步创建的 getCompressImageNode() 方法获取压缩后的...以上是我能想到的图片压缩的7个功能,如果你有想到其他的需求,欢迎在评论区留言。如果文中有错漏,也欢迎指出!

    1.4K20
    领券