浏览器中File,FileReader,Blob, FormData, ArrayBuffer等对象对比分析

File对象:负责处理那些以文件形式存在的二进制数据,也就是操作本地文件;
FileList对象:File对象的网页表单接口;
FileReader对象:负责将二进制数据读入内存内容;
URL对象:用于对二进制数据生成URL。

1.File

提供了如下的元信息,通过FileList中的单个文件调用
name:文件名,该属性只读。
size:文件大小,单位为字节,该属性只读。
type:文件的MIME类型,如果分辨不出类型,则为空字符串,该属性只读。
lastModified:文件的上次修改时间,格式为时间戳。
lastModifiedDate:文件的上次修改时间,格式为Date对象实例。

2.FileList

参照http://javascript.ruanyifeng.com/htmlapi/file.html

其中说明的两个FileList
(1)使用input上传文件,直接通过 <input type="file" id="input" onchange="console.log(this.files.length)" multiple />,其中this.files就是FileList
(2)使用拖拽的方式

    function(evt){
        var files = evt.dataTransfer.files; // FileList object.
    }

3.FileReader

FileReader API用于读取文件,即把文件内容读入内存。它的参数是File对象或Blob对象。

(1)readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。
(2)readAsText(Blob|File, opt_encoding):返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。
(3)readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。
(4)readAsArrayBuffer(Blob|File):返回一个ArrayBuffer对象。

4.Blob

参照http://javascript.ruanyifeng.com/htmlapi/file.html

1.全称Binary Large Object,即二进制大数据对象,提供相应的接口;其他操作二进制的对象都是建立在Blob基础之上,并继承了其属性和方法。

2.Blob只有两个属性,分别为size和type;
size:二进制数据的大小,单位为字节。
type:二进制数据的MIME类型,全部为小写,如果类型未知,则该值为空字符串。

3.相关方法 】
(1)Blob构造函数,接受两个参数。第一个参数是一个包含实际数据的数组,第二个参数是数据的类型,这两个参数都不是必需的。
(2)Blob对象的slice方法,将二进制数据按照字节分块,返回一个新的Blob对象。

5.FormData

6.ArrayBuffer

7.Canvas

8.URL

URL对象用于生成指向File对象或Blob对象的URL。

var objecturl =  window.URL.createObjectURL(blob);//生成 
window.URL.revokeObjectURL(objectURL);//是失效

9.将Base64转化为Form-Data形式

function base64ToFile (baseUrl) {
  let byteString = window.atob(baseUrl.split(',')[1])
  let mimeString = baseUrl.split(',')[0].split(':')[1].split(';')[0]

  // 类型数组
  let ia = new Uint8Array(byteString.length)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let formdata = new window.FormData()
  let file = new window.Blob([ia], {
    type: mimeString
  })
  formdata.append('file', file, 'cms.' + mimeString.split('/')[1])
  return formdata
}
    原文作者:pengj
    原文地址: https://segmentfault.com/a/1190000007806465
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞