转换-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;
        typescript
      const blob = 'blob类型'
const file = new File([blob], 'fileName.txt', {type: blob.type})

`转为String`


            
             
              
               
                使用 FileReader 工具。
               
               
                typescript
               
               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 方法：
               
               
                typescript
               
               const blob = 'blob类型'
const arrayBuffer = await blob.arrayBuffer()

或者使用 FileReader 工具：


          
           
            
             
              
               
                typescript
               
               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;
        typescript
      const file = 'file类型'
const blob = new Blob([file], {type: file.type})

`转为File`


        
         
          
           
            
             
              
               
                
                 
                  转为String
                  
                  
                 
                 
                  使用 FileReader 工具。
                 
                 
                  typescript
                 
                 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 方法：
                 
                 
                  typescript
                 
                 const file = 'file类型'
const arrayBuffer = await file.arrayBuffer()

或者使用 FileReader 工具：


      
       
        
         
          
           
            
             
              
               
                
                 
                  typescript
                 
                 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;
        typescript
      const string = 'string类型'
const blob = new Blob([string])

`转为File`


    
     
      
       
        
         
          
           
            
             
              
               
                
                 
                  
                   使用 File 的构造函数：
                  
                  new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
        typescript
      const string = 'string类型'
const file = new File([string], 'fileName.txt')

`转为String`


   
    
     
      
       
        
         
          
           
            
             
              
               
                
                 
                  
                   
                    转为ArrayBuffer
                    
                    
                   
                   
                    前端浏览器中没有太好用的直接转的原生方法，可以先转为其他类型再转为ArrayBuffer，比如
                    
                     String => Blob => ArrayBuffer
                    
                    。
                   
                   
                    NodeJs中，使用 Buffer 对象：
                   
                   
                    typescript
                   
                   const string = 'string类型'
const arrayBuffer = Buffer.form(string).buffer
    转为Buffer
NodeJs中，使用 Buffer 对象：
        typescript
      const string = 'string类型'
const arrayBuffer = Buffer.form(string)
    ArrayBuffer(均支持)
一种二进制数据对象，在内存中存储数据的一种形式。
构造函数：
        typescript
      new(byteLength: number): ArrayBuffer;
byteLength：这个ArrayBuffer的长度。
不过一般开发，几乎不会遇到需要使用构造函数来创建 ArrayBuffer 的场景，说实话使用这种数据类型的情况都很少。
转为Blob
使用 Blob 的构造函数：
      new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;
        typescript
      const arrayBuffer = new ArrayBuffer(0)
const blob = new Blob([arrayBuffer])
    转为File
使用 File 的构造函数：
      new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
        typescript
      const arrayBuffer = new ArrayBuffer(0)
const file = new File([arrayBuffer], 'fileName.txt')
    转为String
使用 TextDecoder 对象，可以在 new TextDecoder() 时传入一个可选的编码，比如 'utf-8'，
        typescript
      const arrayBuffer = new ArrayBuffer(0)
const string = new TextDecoder().decode(arrayBuffer)
    转为ArrayBuffer
转为Buffer
仅Nodejs中存在，直接使用 Buffer.from 方法：
        typescript
      const arrayBuffer = new ArrayBuffer(0)
const buffer = Buffer.from(arrayBuffer)
    Buffer(仅NodeJs支持)
使用node的fs Api的 readFile 方法，得到的就是 Buffer，除非 readFile 的第二个参数写的是 'utf-8'，则会读取文件的内部字符。
Buffer 已经没有了 new 的方法，如果要直接创建，直接使用下面的方法来创建 buffer：
        typescript
      const buffer = Buffer.from('内容')
    转为Blob
一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。
转为File
一个仅在浏览器存在，一个仅在NodeJs中存在，没有交集。
转为String
直接toString：
        typescript
      const buffer = Buffer.from('内容')
const string = buffer.toString('utf-8')
    转为ArrayBuffer
直接读取内部buffer变量：
        typescript
      const buffer = Buffer.from('内容')