1. 谈起文件流处理，一般大家都不会太在意前端的文件类型数据处理，今天我们来谈一谈前端如何处理文件类型数据。在这里不得不提前相关文件流的操作对象及接口。
  • 内置文件流接口： Blob（文件流接口定义）
  • 内置文件流对象 ： File（单文件，继承于接口Blob，故可使用Blod的方法级）和 FileList（多文件集合）
  • 内置文件流读取对象 ： FileReader（单文件读取）

2. 什么情况下使用文件对象处理数据，以及文件流如何使用。



  • 使用情况： ①.<input type="file"/> 上传文件是处理文件。

②.canvas将图片转换Bold数据类型或DataURL数据类型



③.图片，多媒体文件压缩使用



  • 如何使用：

案例一: 上传图片，在web端预览使用DataURL方式预览图片。代码如下： 



<!DOCTYPE html>
<html>
<head>
  <title>图片上传预览</title>
</head>
<body>
  <input type="file" class="upload" />
  <img class="previewImg" src=""/>
</body>
</html>

复制代码





(function(){
    var dataUrl;
    var file = document.querySelector('input.upload').files[0];
    var fr = new FileReader();
    fr.readAsDataURL(file); //读取文件内容，读取完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
    // fr.readAsBinaryString(file) 读取文件内容，读取完成，result属性中将包含所读取文件的原始二进制数据。
    // fr.readAsText(file) 读取文件内容,读取完成,result属性中将包含一个字符串以表示所读取的文件内容。
    // fr.readAsArrayBuffer(file) 读取文件内容,读取完成,result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
    fr.onload(function(){ //文件读取成功回调
        dataUrl = fr.result;  //result属性为data:URL格式,与读取方式有关
        document.querySelector('img.previewImg').src = dataUrl 
    });
})复制代码



案例二: web端转换img标签图片格式为bold数据类型或DataURL数据类型 



<!DOCTYPE html>
<html>
<head>
  <title>图片上传预览</title>
</head>
<body>
  <img class="left-img" src="./images/AAA.png"/>
  <img class="right-img" src=""/>  
</body>
</html>


复制代码





(function(){
   /**
    *采用canvas绘图时要考虑到图片跨越问题，具体解决方案见下链接
    *（https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image）
    * 本文不涉及跨越问题
    */
    var image = document.querySelector('img.left-img');
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height= image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage( img, 0, 0 );
    console.log(canvas.toBlob());//转换成bold类型
    console.log(canvas.toDataURL());//转换成dataURL类型
})复制代码



案例三: 上传图片并压缩转换成bold数据类型或DataURL数据类型 



<!DOCTYPE html>
<html>
<head> 
  <!-- referrer策略设置，该设置可使图片跨越访问 -->
  <meta name="referrer" content="no-referrer" />
  <title>图片上传预览</title>
</head>
<body>
  <input type="file" class="upload" />
  <img class="previewImg" src=""/>
</body>
</html>复制代码





(function(){
   /**
    * 采用canvas绘图时要考虑到图片跨越问题，若以上meta没解决跨越问题，具体解决方案见下链接
    *（https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image）
    * 本文不涉及跨越问题
    */
    var dataUrl,
    image = new Image();
    fillle = document.querySelector('input.upload').files[0],
    fr = new FileReader();
    fr.readAsDataURL(file); //读取文件内容，读取完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
    fr.onload(function(){ //文件读取成功回调
        dataUrl = fr.result;  //result属性为data:URL格式,与读取方式有关
        image.src = dataUrl;
    });
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height= image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage( img, 0, 0 );
    canvas.toBlob(function(blob) {
        console.log(blob)  //转换成bold类型
    },"image/jpeg", 0.8);
    var DataURL = canvas.toDataURL.toDataURL("image/jpeg", 0.8);
    document.querySelector('img.previewImg').src = DataURL;
    console.log(DataURL)  //转换成DataURL 类型
})复制代码