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>
实例: