二进制数组

ES6中二进制数组包括:

ArrayBuffer对象

TypedArray视图

DataView视图

ArrayBuffer对象代表原始的二进制数据,TypeArray视图用来读写简单类型的二进制数据,DataView视图用来读写复杂类型的二进制数据。

二进制数组主要存放 图片、视频、声音、文件等等,将其作为二进制方式存储在数组里面

以ArrayBuffer对象为例:

<input type="file" name="fileInput" id="fileInput" v-on:change='showImg' />
<img :src="buffer" />

<script>
  function arrayBufferToBase64(buffer){
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for(var i=0;i<len;i++){
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);    // 返回字符串
  }
  var thisa;  // 定义一个thisa用于传输
  export default {
    name: 'hello',  // 变量的name是hello
    data() {
      studyES6();
      return {
        buffer: 'data:image/png;base64,',
        msg: '欢迎 to Your Vue.js App',
      }
    },
    created () {  // 页面全部渲染完毕后调用
      thisa = this;  // 此处的this表示default这个对象,所以可以通过thisa访问buffer
    },
    methods: {  // 定义方法
      showImg: function(){
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];  // 获取文件对象
        var reader = new FileReader();  // 读取文件
        reader.readAsArrayBuffer(file);  // 将reader转为ArrayBuffer对象
        reader.onload = function(){
          var arrayBuffer = reader.result;   // reader.result.toByteArray;
          let arrayBase = arrayBufferToBase64(arrayBuffer);  // 将arrayBuffer转成字符串
          thisa.buffer = 'data:image/png;base64,' + arrayBase;
        }
      }
    }
  }
  function studyEs6(){

  }
</script>

实例:

原文地址:https://www.cnblogs.com/crazycode2/p/6685795.html