js里base64与file之间的转换

这篇具有很好参考价值的文章主要介绍了js里base64与file之间的转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、base64转为file

在 js中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。

方法一、base64 直接转换为 File 对象:

首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。

下面是一个示例函数,它接收一个 base64 字符串和文件名,并返回一个 File 对象:

function base64ToFile(base64, fileName) {
  let arr = base64.split(",");
  let mime = arr[0].match(/:(.\*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, { type: mime });
}

需要注意的是, atobUint8Array 是在所有现代浏览器中都可用的。在旧浏览器中,需要使用其它库来替代这两个函数。

如果需要在使用这个函数之前检查文件类型是否支持,可以在函数中增加文件类型校验的代码。

方法二、base64 先转换为 Blob,再由 Blob 转换为 File:

在 JavaScript 中,可以使用 Blob 对象将 base64 字符串转换为二进制数据对象 Blob。

首先,使用 atob() 函数将 base64 字符串解码为二进制字符串。然后,使用 Uint8Array 构造函数将二进制字符串转换为字节数组。最后,使用 Blob 构造函数,将字节数组作为第一个参数,创建一个新的 Blob 对象。

1、先将 base64 转换为 Blob:
// 将 base64 转换为 Blob
function base64ToBlob(base64) {
  var arr = base64.split(","),
    mime = arr[0].match(/:(.\*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {
    type: mime,
  });
}

使用类似这样的方式构造出来的 Blob 对象就可以按照二进制文件的方式来使用,可以作为参数传入 FileReader, 通过 FormData 对象上传到服务器等。

需要注意的是, atob 和 Uint8Array 是在所有现代浏览器中都可用的。在旧浏览器中,需要使用其它库来替代这两个函数。

如果需要在使用这个函数之前检查文件类型是否支持,可以在函数中增加文件类型校验的代码。

另外,在 HTML5 中,可以使用 canvas 元素的 toBlob()方法 将图片转换为 Blob 对象,这个方法是基于 HTMLCanvasElement 元素的, 可以将一张图片转成 base64 后,再使用 canvas 的方法将图片绘制在 canvas 元素上,然后使用 toBlob() 方法获取到 Blob 对象。

还有一些第三方库,比如 FileSaver.js, 可以使用它来将 Blob 对象保存在本地。

这些方法都能达到相同的目的,可以根据项目中使用的 JavaScript 环境和需要的复杂度来进行选择

在 JavaScript 中,可以使用 File 构造函数将一个 Blob 对象转换为一个 File 对象。

这个构造函数接收两个参数: 第一个参数是一个 Blob 或者 ArrayBuffer 对象,第二个参数是文件的名字。

2、再将 Blob 转换为 File:
function blobToFile(blob, fileName) {
  return new File([blob], fileName);
}

由于 Blob 是 File 的超集, 所以可以直接将 Blob 对象转换为 File 对象, 这样就可以使用 File 对象的各种方法,例如获取文件名、类型等。

由于这个是新的 API, 可能在部分浏览器上不能使用, 也可以使用第三方库来兼容在旧浏览器上使用。

二、File => base64

方法一、File 直接转换为 base64:

使用 FileReader 对象将 File 对象转换为 base64 编码的字符串。以下是一个简单的 JavaScript 代码示例:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    // 创建一个新的 FileReader 对象
    const reader = new FileReader();
    // 读取 File 对象
    reader.readAsDataURL(file);
    // 加载完成后
    reader.onload = function () {
      // 将读取的数据转换为 base64 编码的字符串
      const base64String = reader.result.split(",")[1];
      // 解析为 Promise 对象,并返回 base64 编码的字符串
      resolve(base64String);
    };

    // 加载失败时
    reader.onerror = function () {
      reject(new Error("Failed to load file"));
    };
  });
}

方法二、File 先转换为 Blob,再由 Blob 转换为 base64:

1、先将 File 转换为 Blob:

File 对象本身就是一种特殊类型的 Blob 对象,因此将 File 转换为 Blob 可以直接使用 File 对象。

如果需要将 Blob 对象转换为另一种 Blob 对象,可以使用 Blob 构造函数,将原始 Blob 对象作为参数传递,然后使用新构造出来的 Blob 对象进行操作。以下是一个将 File 对象转换为 Blob 对象的示例代码:

function fileToBlob(file) {
  return new Blob([file], { type: file.type });
}
2、再将 Blob 转换为 base64:

可以使用 FileReader 对象读取 Blob 数据并转换为 DataURL。Data URL 是一种基于 Base64 编码的 URL 方案,可以用于在网页中嵌入图片或其他资源。

以下是一个将 Blob 对象转换为 base64 字符串的示例代码:

function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => resolve(reader.result.split(",")[1]);
    reader.onerror = reject;
  });
}

上述代码中的 blobToBase64 函数接收一个 Blob 对象作为参数,并返回一个 Promise 对象,该 Promise 对象最终返回一个 base64 字符串。在函数内部,创建了一个 FileReader 对象,并调用其 readAsDataURL 方法将 Blob 对象读取为 DataURL。在读取完成后,我们使用 Promise 对象的 resolve 方法将 DataURL 中的 base64 字符串提取出来并返回。如果读取过程中出现错误,则使用 reject 方法拒绝 Promise 对象。文章来源地址https://www.toymoban.com/news/detail-697590.html

到了这里,关于js里base64与file之间的转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JS】前端base64转图片File对象

    base64ToFile.js

    2024年02月05日
    浏览(59)
  • js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式:

    2024年02月03日
    浏览(50)
  • JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

    FileReader.readAsArrayBuffer() - Web API 接口参考 | MDN FileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。 https://

    2024年02月15日
    浏览(57)
  • Java Base64 和 File 之间互转

    1、Base64 转 File 2、File 转 Base64

    2024年02月16日
    浏览(41)
  • 图片格式转换(File、Blob、base64)

    前言 记录一下比较常见的图片格式(File、Blob、base64)在不同的场景他们之间的相互转换的方法。 一、类型简介 Blob BLOB(binary large object): 二进制大对象,是一个可以存储二进制文件的容器。 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。 属性名称 读/写 描

    2024年02月02日
    浏览(68)
  • 前端base64转file文件方法

    有这样一种场景,比如canvas截取部分dom作为图片,上传到服务器,而canvas截取的图片返回的是base64字符串,而服务器接收的是file文件。因此我们需要将base64字符串转成file文件,存储到服务器中。 方法一:通过new File(),将base64直接转成file文件。 (此方法需要考虑浏览器兼容

    2024年02月11日
    浏览(40)
  • 使用JavaScript将图片转换为Base64

    在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用。在这篇文章中,我将向您展示如何使用JavaScript将图片转换为Base64格式。   FileReade方式         首先,我们需要创建一个FileReader对象,它是HTML5中的一个API,用于读取文

    2024年02月03日
    浏览(44)
  • 前端FileReader对象实现图片file文件转base64

    1、file转base64具体代码 2、原理解析 ​ 上面封装的方法,其原理主要是借助 FileReader 对象来实现图片格式的转换, FileReader 对象中的 readAsDataURL() 方法,可以读取一个 File 或 Blob 类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过 readAsDataURL() 方法去读

    2023年04月09日
    浏览(39)
  • 将html字符串中的base64图片转换成file并上传

    目的 解决富文本编辑器中复制粘贴的图片 base64 字符串过长导致无法存储到数据库的问题 思路 通过正则 获取html字符串中里面的所有图片 base64 数组 然后每个图片base64 转成file 使用上传文件的函数 上传到服务器上. 将上传后获取到的图片访问url 替换成 数据里面的 img 的 src

    2024年01月23日
    浏览(55)
  • 前端 base64与图片相互转换

    base64转图片 如下图:(后端返回的数据) base64转换图片文件 图片(url)转换base64 便捷的图片转化base64 利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    2024年02月12日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包