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

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

,可以使用Buffer对象和Buffer的toString方法来实现。

首先,需要安装依赖包buffer,可以使用以下命令进行安装:

代码语言:txt
复制
npm install buffer

然后,在代码中引入buffer模块:

代码语言:txt
复制
const Buffer = require('buffer').Buffer;

接下来,假设有一个Blob对象blob,可以通过读取Blob的数据并将其转换为Buffer对象,然后使用Buffer的toString方法将其转换为Base64字符串:

代码语言:txt
复制
const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const buffer = Buffer.from(reader.result);
      const base64 = buffer.toString('base64');
      resolve(base64);
    };
    reader.onerror = reject;
    reader.readAsArrayBuffer(blob);
  });
};

以上代码定义了一个名为blobToBase64的函数,该函数接受一个Blob对象作为参数,并返回一个Promise对象。在函数内部,创建了一个FileReader对象,并通过readAsArrayBuffer方法读取Blob的数据。当读取完成时,将读取结果转换为Buffer对象,并使用Buffer的toString方法将其转换为Base64字符串。最后,通过Promise的resolve方法将Base64字符串返回。

使用示例:

代码语言:txt
复制
const blob = new Blob(['Hello, World!'], { type: 'text/plain' });

blobToBase64(blob)
  .then((base64) => {
    console.log(base64);
  })
  .catch((error) => {
    console.error(error);
  });

以上示例中,创建了一个包含字符串"Hello, World!"的Blob对象,并将其传递给blobToBase64函数进行转换。转换完成后,将Base64字符串打印到控制台。

注意:由于NodeJS中没有原生支持Blob和FileReader对象,因此需要使用第三方库或自定义方法来模拟这些功能。以上示例中使用了Buffer对象和Buffer的toString方法来实现Blob到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.8K20

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

**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.7K100

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构造参考这里,可以使用类型数据来处理。

81010

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

可以把base64化成blob,然后再append到一个formData里面,下面的函数(来自b64-to-blob)可以把base64blob: functionb64toBlob(b64Data...会触发表单提交,当请求完成(成功或者失败)之后就会触发iframeonload事件,然后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.8K110

前端本地文件操作与上传

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

1.5K20

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.1K40

你不知道 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 对象

4K20

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) { // base64blob...: 'text/plain' }) blob.text().then(console.log) // 'hello world' 1 2 FileReader FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上文件

22610

图片压缩原理

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.6K31

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.7K21

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.4K20

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

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

1.3K20
领券