blob的浅谈

blob的浅谈

三个方面：是什么 有什么作用 例子🌰

bolb是什么

自己的理解：
	blob接收两个参数
		第一个参数是一个array，第二个参数为Object，属性type为文件的类型
		array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8
		DOMStrings 为 <div>DOMStrings</div>
		
		
		blob的返回值为一个Object，然后可以里边的size表示文件的大小，type表示文件的类型（此类型为创建时的type类型）
	
		blob的方法,这里举一个🌰  其余方法 MDN链接https://developer.mozilla.org/en-US/docs/Web/API/Blob
		
			text() 会解析blob这个数据，返回一个Promise，里边的数据为UTF-8 
					会把blob转换的数据，变为UTF-8的格式，可以使用浏览器直接读取
					let elNode=new Blob(['<div>DOMStrings</div>'],{type:"text/html"})
					elNode.text().then(date=>{
							可以直接渲染到页面上
							xxxxx.innerHTML=date
					})

有什么作用（读取文件，生成一个二进制的文件地址，防止盗用）

结合window.URL.createObjectURL()
	
	生成一个文件的地址
		首先搞一个input type="file"  上传一个文件
		
		然后获取到这个input框，然后读取出files[0] 
		
		声明一个blob，然后第一个参数传入files[0] ，第二个参数的type就为{type:file.files[0].type}
		
		
		然后会返回blob数据，然后使用window.URL.createObjectURL生成指向这个文件的地址
		
		然后就会返回一个地址，这个地址指向的就是file上传的文件，可以使用window.open打开
		
		
	

例子🌰

	🌰
		let file=document.querySelector(".file")
      file.onchange=function(e){
        let c=new Blob([file.files[0]],{type:file.files[0].type})
       	window.open(window.open(window.URL.createObjectURL(c)))
      }
      
  🌰
  	let b=new Blob(['<div>DOMStrings</div>'],{type:"text/html"})
    document.querySelector(".text").onclick=()=>{
      b.text().then(date=>{
        document.querySelector(".text").innerHTML=date
      })		
    }