• Blob,ArrayBuffer,FileReader,FormData,Buffer的理解


    Blob

    • 作用: 操作文件 (下载文件,展示图片,读取文件,分片文件)
      1.下载文件
    <!-- html部分 -->
    <a id="h">点此进行下载</a>
    <!-- js部分 -->
    <script>
      var blob = new Blob(["Hello World"]);
      var url = window.URL.createObjectURL(blob);
      var a = document.getElementById("h");
      a.download = "helloworld.txt";
      a.href = url;
    </script>
    
    //download属性不兼容IE, 对IE可通过window.navigator.msSaveBlob方法或其他进行优化)
    
    //步骤: 1.根据下载内容创建blob实例  2.将blob实例转换为url   3. 将 url赋值给a标签的href   4. 给a标签的download定义下载文件的名字
    

    2.展示图片

    <!-- html部分 -->
    <input type="file" id='f' />
    <img id='img' style=" 200px;height:200px;" />
    <!-- js部分 -->
    <script>
      document.getElementById('f').addEventListener('change', function (e) {
        var file = this.files[0];
        const img = document.getElementById('img');
        const url = window.URL.createObjectURL(file);
        img.src = url;
        img.onload = function () {
            // 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象
            window.URL.revokeObjectURL(url);
        }
      }, false);
    </script>
    
    // files[0]是blob的特殊形式     相当于上面的步骤1
    

    3.文件分片上传

    <!-- html部分 -->
    <input type="file" id='f' />
    <!-- js部分 -->
    <script>
    function upload(blob) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/ajax', true);
        xhr.setRequestHeader('Content-Type', 'text/plain')
        xhr.send(blob);
    }
    
    document.getElementById('f').addEventListener('change', function (e) {
        var blob = this.files[0];
        const CHUNK_SIZE = 20; .
        const SIZE = blob.size;
        var start = 0;
        var end = CHUNK_SIZE;
        while (start < SIZE) {
            upload(blob.slice(start, end));   //blob.slice 返回的是截取下来的blob
            start = end;
            end = start + CHUNK_SIZE;
        }
    }, false);
    </script>
    

    4.读取文件 通过FileReader

    FileReader.readAsText(Blob):将Blob转化为文本字符串
    FileReader.readAsArrayBuffer(Blob): 将Blob转为ArrayBuffer格式数据
    FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL
    
    
    <input type="file" id='f' />
    <script>
      document.getElementById('f').addEventListener('change', function (e) {
        var file = this.files[0];
        const reader = new FileReader();
        reader.onload = function () {
            const content = reader.result;
            console.log(content);
        }
        reader.readAsText(file);
      }, false);
    </script>
    

    ArrayBuffer

    • 作用: 操作文件 (读取,写入) 本身不具备写入的功能,通过TypeArray,DataView来进行写入操作
    <!-- html部分 -->
    <input type="file" id='f' />
    
    <!-- js部分 -->
    document.getElementById('f').addEventListener('change', function (e) {
      const file = this.files[0];
      const fileReader = new FileReader();
      fileReader.onload = function () {
        const result = fileReader.result;
        console.log(result)
      }
      fileReader.readAsArrayBuffer(file);
    }, false);
    
    • TypeArray的写入
    const typedArray1 = new Int8Array(8);
    typedArray1[0] = 32;
    
    const typedArray2 = new Int8Array(typedArray1);
    typedArray2[1] = 42;
    
    console.log(typedArray1);
    //  output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]
    
    console.log(typedArray2);
    //  output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]
    

    转自:https://zhuanlan.zhihu.com/p/97768916

  • 相关阅读:
    为什么要用&lt;!DOCTYPE&gt;声明
    [asp.net core] Tag Helpers 简介(转)
    asp.net core输出中文乱码的问题
    探索Aspnetcore+mysql+efcore
    [Redis]发布/订阅
    [Centos 6]升级安装GCC(2)
    [Centos]升级安装GCC
    [小程序]那些icons
    初探微信小程序
    [CentOs7]搭建ftp服务器(3)——上传,下载,删除,重命名,新建文件夹
  • 原文地址:https://www.cnblogs.com/94-Lucky/p/14756023.html
Copyright © 2020-2023  润新知