JS 中 File、blob、base64 之间的相互转换

FileToBlob

/**
 * File 转 Blob
 * @param file     {File}   file
 * @return {Promise<Blob>}
 */
function FileToBlob(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.addEventListener('load', (evt) => {
      const isObj = typeof evt.target.result === 'object';
      const blob = isObj ? new Blob([evt.target.result]) : evt.target.result;
      resolve(blob);
    });
    reader.addEventListener('error', reject);
    reader.readAsArrayBuffer(file);
  });
}

FileToBase64

/**
 * File 转 Base64
 * @param file     {File}   file
 * @return {Promise<String>}
 */
function FileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.addEventListener('load', (evt) => resolve(evt.target.result));
    reader.addEventListener('error', reject);
    reader.readAsDataURL(file);
  });
}

BlobToFile

/**
 * Blob 转 File
 * @param blob     {Blob}   blob
 * @param fileName {String} 文件名
 * @param mimeType {String} 文件类型
 * @return {File}
 */
function BlobToFile(blob, fileName, mimeType) {
  return new File([blob], fileName, { type: mimeType});
}

BlobToBase64

/**
 * Blob 转 Base64
 * @param blob     {Blob}   blob
 * @return {Promise<String>}
 */
function BlobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.addEventListener('load', (evt) => resolve(evt.target.result));
    reader.addEventListener('error', reject);
    reader.readAsDataURL(blob);
  });
}

Base64ToFile

/**
 * Base64 转 File
 * @param base64   {Base64} base64
 * @param fileName {String} 文件名
 * @param mimeType {String} 文件类型
 * @return {File}
 */
function Base64ToFile(base64, fileName, mimeType) {
  const arr = base64.split(',');
  const defaultMimeType = arr[0].match(/:(.*?);/)[1];
  const suffix = defaultMimeType.split('/')[1];
  const binary = atob(arr[1]);
  const array = [];
  for (let i = 0; i < binary.length; i += 1) {
    array.push(binary.charCodeAt(i));
  }

  return new File(
    [new Uint8Array(array)],
    fileName || `${new Date().getTime()}.${suffix}`,
    { type: mimeType || defaultMimeType },
  );
}

Base64ToBlob

/**
 * Base64 转 Blob
 * @param blob     {Base64} Base64
 * @param mimeType {String} 文件类型
 * @return {Blob}
 */
function Base64ToBlob(base64, mimeType) {
  const arr = base64.split(',');
  const defaultMimeType = arr[0].match(/:(.*?);/)[1];
  const binary = atob(arr[1]);
  const array = [];
  for (let i = 0; i < binary.length; i += 1) {
    array.push(binary.charCodeAt(i));
  }

  return new Blob([new Uint8Array(array)], { type: mimeType || defaultMimeType });
}

Uint8ArrayToBase64

/**
 * Uint8 转 Blob
 * @param blob     	{Uint8Array} 	u8Arr
 * @param type 		{String} 		文件类型
 * @return {Blob}
 */
function Uint8ToBase64(u8Arr, type = 'image/png') {
  const CHUNK_SIZE = 0x8000;
  const length = u8Arr.length;
  let index = 0;
  let result = '';
  let slice;
  while (index < length) {
    slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
    result += String.fromCharCode.apply(null, slice);
    index += CHUNK_SIZE;
  }
  return 'data:' + type.toLowerCase() + ';base64, ' + btoa(result);
}
  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 对于JSBlob, FileBase64之间的关系与转化问题,我可以告诉你,BlobFile 是用来表示二进制数据的,而 Base64 则是一种编码方式,用来把二进制数据编码成可读的字符串。因此,可以使用Base64BlobFile 对象转换为可读的字符串,反过来也可以将 Base64 编码的字符串解码成 BlobFile 对象。 ### 回答2: 在 JavaScript BlobFilebase64是用于处理文件和数据的常见对象和编码格式。它们之间的关系和转化如下: 1. Blob对象是一个不可变的、类似文件的数据对象,它可以存储任意类型的数据。Blob对象可以通过构造函数创建,也可以通过其他API(例如XHR)返回。Blob对象没有指定的文件名和文件类型。 2. File对象是继承自Blob对象的一种特殊类型,它表示用户计算机上的一个文件。File对象通常与<input type="file">元素一起使用,可以通过用户选择或拖放进行获取。File对象不仅包含Blob对象的数据,还包括文件名、文件类型和其他相关属性。 3. base64是一种编码方式,可以将二进制数据转换为纯文本字符。这种编码方式是用于在网络上传输二进制数据而不会丢失信息的一种表示方法。将二进制数据编码为base64可以使用JavaScript的btoa()函数,将base64编码转换为二进制数据可以使用atob()函数。 关于它们之间转换: 1. 将BlobFile对象转换base64编码的字符串可以使用FileReader对象。通过使用FileReader的readAsDataURL()方法,可以将BlobFile对象读取为DataURL,其包含了base64编码的数据。然后,可以从DataURL字符串提取base64编码的数据部分。 2. 将base64编码的字符串转换Blob对象可以使用URL.createObjectURL()方法。首先,将base64字符串转换为二进制数据,然后创建一个Blob对象,最后使用URL.createObjectURL()方法生成一个URL。这个URL可以用来引用这个Blob对象。 综上所述,Blob对象是一种存储不可变数据的容器,File对象是Blob对象的特殊类型,用于表示用户计算机上的文件,而base64是一种编码方式,用于将二进制数据转换为纯文本字符。他们可以进行相互转换,以满足不同数据处理和传输的需求。 ### 回答3: 在JavascriptBlobFileBase64都与数据的托管和处理有关。 Blob是二进制对象,它代表了一个不具体类型的原始数据块,可以存储各种数据,例如图像、音频和视频文件等。Blob通常用于储存二进制数据,以便在Web进行处理或传输。 FileBlob的一种特殊类型,通过用户选择或拖放文件上传时创建。File对象继承了Blob的所有属性和方法,并且还包含有关文件的一些元数据,例如文件名、大小、最后修改时间等。File对象通常用于在Web应用程序处理和上传用户选择的文件。 Base64是一种用于将二进制数据编码成ASCII字符的编码方法。它将二进制数据转换为一系列可打印字符,以便在文本格式传输或存储。Base64编码的数据可以作为常规字符串进行处理。在Javascript,可以使用btoa()方法将二进制数据转换Base64字符串,使用atob()方法将Base64字符串转换回二进制数据。 在转化方面,BlobFile可以通过URL.createObjectURL()方法将其转换为可供URL使用的临时链接。这可以通过创建一个指向BlobFile的URL,从而避免直接暴露原始数据。另外,可以使用FormData对象将BlobFile对象作为表单数据进行传输,以便在后端进行处理。 将BlobFile转换Base64字符串可以通过FileReader对象来实现。可以使用FileReader的readAsDataURL()方法将BlobFile读取为DataURL,然后从DataURL获取Base64字符串。 相反,将Base64字符串转换BlobFile对象可以使用一些方法。例如,可以使用URL.createObjectURL()方法将Base64字符串转换Blob链接,然后使用提供的URL创建Blob对象。另外,可以使用Blob构造函数将Base64字符串直接转换Blob对象。 综上所述,Blob代表二进制数据块,FileBlob的一种特殊类型,Base64用于将二进制数据编码为文本格式。它们之间可以进行转换,以进行数据的操作和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值