转换-Js文件类型和转换

title: 转换-Js文件类型和转换 id: d88e5d7760e68e988dcf17b7f88b4d3f tags: [] date: 2000/01/01 00:00:00 updated: 2023/05/29 17:15:48 isPublic: true --#|[分隔]|#--

转换-Js文件类型和转换

以下讲述的类型，指的是浏览器或NodeJs中，文件、数据形态互相转换时会用到的一些类型。

每个类型下，除了描述这个类型的构造函数，还会描述这个从这个类型转为其他类型时的方法。

Blob(仅浏览器支持)

Blob，即 Binary large Object，本质上是一个二进制对象，该对象在创建、读取后，是一个只读的、原始数据的类文件对象。

// 构造函数语法
new Blob(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;

// eg:
const htmlBlob = new Blob(['<html><h2>一段HTML</h2></html>'], {type : 'text/html'})
console.log(htmlBlob)

参数blobParts：是一个数组，其中的 BlobPart 包含string | Blob | ArrayBuffer | ArrayBufferView 等。
参数options：可选对象，指定两个属性：
type：表示Blob对象数据的MIME类型
endings："native" | "transparent"，指定包含行结束符\n的字符串如何写入，

属性：

- size：长度
- type：MIME类型

方法：

arrayBuffer()：返回包含Blob所有内容的二进制格式的ArrayBuffer的一个promise对象
stream()：返回能读取Blob的ReadableStream对象
text()：返回包含Blob所有内容的字符串(UTF-8编码)的一个promise对象
slice()：返回原Blob在该范围的数据，得到一个新的Blob对象，需要传入start、end值作为参数

转为Blob

无

转为File

使用 File 的构造函数：

new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;

eg：

const blob = 'blob类型'
const file = new File([blob], 'fileName.txt', {type: blob.type})

转为String

使用 FileReader 工具。

eg：

const blob = 'blob类型'
const string = await new Promise<string>((resolve, reject) => {
  const fileReader = new FileReader()
  fileReader.readAsText(blob, 'utf-8')
  fileReader.onload = () => {
    resolve(fileReader.result as string)
  }
  fileReader.onerror = (error) => {
    reject(error)
  }
})

转为ArrayBuffer

直接调用 blob 的 arrayBuffer 方法：

const blob = 'blob类型'
const arrayBuffer = await blob.arrayBuffer()

或者使用 FileReader 工具：

const blob = 'blob类型'
const arrayBuffer = await new Promise<ArrayBuffer>((resolve, reject) => {
  const fileReader = new FileReader()
  fileReader.readAsArrayBuffer(blob)
  fileReader.onload = () => {
    resolve(fileReader.result as ArrayBuffer)
  }
  fileReader.onerror = (error) => {
    reject(error)
  }
})

转为Buffer

一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。

File(仅浏览器支持)

File对象继承（所以可以直接当做Blob使用）自Blob对象，是一种特殊类型的Blob，它扩展了对系统文件的支持能力。

得到File对象的常规途径有下面三种：

前端使用 input 标签、自由拖放drop事件，上传文件到页面，得到 File 对象。
node使用文件系统访问API中的 FileSystemFileHandle 对象的 getFile() 方法。

// 构造函数语法
new File(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;

// eg:
const htmlFile = new File(['<html><h2>一段HTML</h2></html>'], 'htmlFile.html', {type: 'text/html'})
console.log('htmlFile', htmlFile)

参数fileBits同Blob的构造函数的第一项。
参数fileName：文件的名称。
参数FilePropertyBag：一些其他非必要配置。

除了继承了Blob的属性和方法外，还多出了File的属性和方法。

多出的属性：

lastModified：最后的修改时间。
name：文件名称。
webkitRelativePath：上传文件夹时，文件夹内部文件的相对路径，兼容性有问题

多出的方法：

无

转为Blob

使用 Blob 的构造函数：

new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;

eg：

const file = 'file类型'
const blob = new Blob([file], {type: file.type})

转为File

无

转为String

使用 FileReader 工具。

eg：

const file = 'file类型'
const string = await new Promise<string>((resolve, reject) => {
  const fileReader = new FileReader()
  fileReader.readAsText(file, 'utf-8')
  fileReader.onload = () => {
    resolve(fileReader.result as string)
  }
  fileReader.onerror = (error) => {
    reject(error)
  }
})

转为ArrayBuffer

直接调用 File 继承自 Blob 的 arrayBuffer 方法：

const file = 'file类型'
const arrayBuffer = await file.arrayBuffer()

或者使用 FileReader 工具：

const file = 'file类型'
const arrayBuffer = await await new Promise<ArrayBuffer>((resolve, reject) => {
  const fileReader = new FileReader()
  fileReader.readAsArrayBuffer(file)
  fileReader.onload = () => {
    resolve(fileReader.result as ArrayBuffer)
  }
  fileReader.onerror = (error) => {
    reject(error)
  }
})

转为Buffer

一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。

String(均支持)

这种类型不用讨论它的构造函数了。

转为Blob

使用 Blob 的构造函数：

new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;

eg：

const string = 'string类型'
const blob = new Blob([string])

转为File

使用 File 的构造函数：

new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;

eg：

const string = 'string类型'
const file = new File([string], 'fileName.txt')

转为String

无

转为ArrayBuffer

前端浏览器中没有太好用的直接转的原生方法，可以先转为其他类型再转为ArrayBuffer，比如 String => Blob => ArrayBuffer。

NodeJs中，使用 Buffer 对象：

const string = 'string类型'
const arrayBuffer = Buffer.form(string).buffer

转为Buffer

NodeJs中，使用 Buffer 对象：

const string = 'string类型'
const arrayBuffer = Buffer.form(string)

ArrayBuffer(均支持)

一种二进制数据对象，在内存中存储数据的一种形式。

构造函数：

new(byteLength: number): ArrayBuffer;

byteLength：这个ArrayBuffer的长度。

不过一般开发，几乎不会遇到需要使用构造函数来创建 ArrayBuffer 的场景，说实话使用这种数据类型的情况都很少。

转为Blob

使用 Blob 的构造函数：

new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;

eg：

const arrayBuffer = new ArrayBuffer(0)
const blob = new Blob([arrayBuffer])

转为File

使用 File 的构造函数：

new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;

eg：

const arrayBuffer = new ArrayBuffer(0)
const file = new File([arrayBuffer], 'fileName.txt')

转为String

使用 TextDecoder 对象，可以在 new TextDecoder() 时传入一个可选的编码，比如 'utf-8'，

const arrayBuffer = new ArrayBuffer(0)
const string = new TextDecoder().decode(arrayBuffer)

转为ArrayBuffer

无

转为Buffer

仅Nodejs中存在，直接使用 Buffer.from 方法：

const arrayBuffer = new ArrayBuffer(0)
const buffer = Buffer.from(arrayBuffer)

Buffer(仅NodeJs支持)

使用node的fs Api的 readFile 方法，得到的就是 Buffer，除非 readFile 的第二个参数写的是 'utf-8'，则会读取文件的内部字符。

Buffer 已经没有了 new 的方法，如果要直接创建，直接使用下面的方法来创建 buffer：

const buffer = Buffer.from('内容')

转为Blob

一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。

转为File

一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。

转为String

直接toString：

const buffer = Buffer.from('内容')
const string = buffer.toString('utf-8')

转为ArrayBuffer

直接读取内部buffer变量：

const buffer = Buffer.from('内容')
const arrayBuffer = buffer.buffer

转为Buffer

无

Previous转换-FileReader Next转换-前端开发的URL的编码和解码

Last updated 3 months ago

Was this helpful?

转换-Js文件类型和转换

title: 转换-Js文件类型和转换 id: d88e5d7760e68e988dcf17b7f88b4d3f tags: [] date: 2000/01/01 00:00:00 updated: 2023/05/29 17:15:48 isPublic: true --#|[分隔]|#--