文件blob、File、base64格式转换

最新推荐文章于 2025-06-16 09:59:52 发布

小矮马

最新推荐文章于 2025-06-16 09:59:52 发布

阅读量3.8k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40007317/article/details/132895088

本文详细讲述了Blob、File对象的属性，以及如何在JavaScript中实现Blob与File、Blob与Base64之间的转换，适合Web开发者了解相关技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、类型简介

（1）blob类型

Blob是一种二进制数据类型，通常表示二进制文件、图片、音频或视频等媒体资源

属性名称	读/写	描述
size	只读	Blob 对象中所包含数据的大小（字节）
type	只读	一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。例如 “image/png”

（2）File类型

File 对象通常是用户在网页中的一个元素上传文件返回的 FileList 对象，或者是拖放操作返回的 DataTransfer 对象，也可以在浏览器中的控制台中自己创建

属性名称	读/写	描述
name	只读	返回文件的名称，由于安全原因，返回的值并不包含文件路径
type	只读	返回 File 对象所表示文件的媒体类型（MIME），如PNG 图像是 “image/png”
lastModified	只读	number，返回所引用文件最后修改日期，自 1970年1月1日0:00 以来的毫秒数
lastModifiedDate	只读	Date，返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期，则使用当前日期来替代
size	只读	File 对象中所包含数据的大小（字节）
webkitRelativePath	只读	返回 File 相关的 path 或 URL

（3）base64类型

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。编码规则：把3个字节变成4个字节；每76个字符加一个换行符；最后的结束符也要处理

2、类型转化

（1）blob 和 File 类型转换

blob 转 File

blobToFile(blob, fileName) {
	const file = new File([blob], fileName, { type: blob.type })
  return file
}

this.blobToFile(this.blob, '1.png')

File 转 blob

fileToBlob(data) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
      const blob = new Blob([e.target.result], { type: data.type })
      resolve(blob)
    }
    fileReader.readAsDataURL(data)
    fileReader.onerror = () => {
      reject(new Error('文件流异常'))
    }
  })
}

await this.fileToBlob(this.file)

（2）blob 和 base64 类型转换

blob 转 base64

blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = (e) => {
      resolve(e.target.result)
    }
  })
}

await this.blobToBase64(this.blob)

base64 转 blob

base64ToBlob(base64) {
  let arr = base64.split(',')
  let type = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: type })
}

this.base64ToBlob('data:image/png;base64,/9j/4AAQSkZJRgABAQ')

（3）File 和 base64 类型转换

File 转 base64

fileToBase64 (data) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader()
    fileReader.onload = (e) => {
      resolve(e.target.result)
    }
    fileReader.readAsDataURL(data)
    fileReader.onerror = () => {
      reject(new Error('文件流异常'))
    }
  })
}

await this.fileToBase64(this.file)

base64 转 File

base64ToFile(base64, filename) {
  const arr = base64.split(',')
  const type = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: type })
}

this.base64ToFile('data:image/png;base64,/9j/4AAQSkZJRgABAQ', '1.png')