JavaScript 文件流转换与使用

11,333 阅读3分钟
  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 类型
})