JS 文件base64、File、Blob、ArrayBuffer 介绍及互转 |
您所在的位置：网站首页 › blob格式照片转二进制 › JS 文件base64、File、Blob、ArrayBuffer 介绍及互转 |
|
JS 文件base64、File、Blob、ArrayBuffer 介绍及互转
2020年7月10日 23859次浏览
前言
今天介绍一下文件的二进制家族js,file,base64,File,Blob,ArrayBuffer。 案例，假如有一个需求，我们通过解析等方式拿到了文件的二进制uint8array 或者base64或者blob，我们如何通过ajax提交给后端接口呢？ 二进制互转1. file对象转base64 let reader = new FileReader(); reader.readAsDataURL(file[0]) console.log(reader)2. base64 转成blob 上传 function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString}); }3. blob 转成ArrayBuffer let blob = new Blob([1,2,3,4]) let reader = new FileReader(); reader.onload = function(result) { console.log(result); } reader.readAsArrayBuffer(blob);4. buffer 转成blob let blob = new Blob([buffer])5. base64 转 file const base64ConvertFile = function (urlData, filename) { // 64转file if (typeof urlData != 'string') { this.$toast("urlData不是字符串") return; } var arr = urlData.split(',') var type = arr[0].match(/:(.*?);/)[1] var fileExt = type.split('/')[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], 'filename.' + fileExt, { type: type }); } 文件ajax上传 const config = { headers:{'Content-Type':'multipart/form-data'} } let fileObj= base64ConvertFile(base64文件,文件名称) let formdata = new FormData() formdata.append('file',fileObj,名称) request.uploadImage(formdata,'', config).then(res=>{}) // 封装的axiso请求 介绍首先介绍二进制数组 二进制数组由三个对象组成。 （1）ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。 （2) TypedArray对象：用来生成内存的视图，通过9个构造函数，可以生成9种数据格式的视图，比如Uint8Array（无符号8位整数）数组视图, Int16Array（16位整数）数组视图, Float32Array（32位浮点数）数组视图等等。 （3）DataView对象：用来生成内存的视图，可以自定义格式和字节序，比如第一个字节是Uint8（无符号8位整数）、第二个字节是Int16（16位整数）、第三个字节是Float32（32位浮点数）等等。 ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。 var buffer = new ArrayBuffer(12); var x1 = new Int32Array(buffer); x1[0] = 1; var x2 = new Uint8Array(buffer); x2[0] = 2; x1[0] // 2二进制的文件形式可以出现在如下场景中： 一、AJAX 传统上，服务器通过AJAX操作只能返回文本数据，即responseType属性默认为text。XMLHttpRequest第二版XHR2允许服务器返回二进制数据，如下： var xhr = new XMLHttpRequest(); xhr.open('GET', someUrl); xhr.responseType = 'arraybuffer'; xhr.onload = function () { var let arrayBuffer = xhr.response; // ··· }; xhr.send();二、Canvas 网页Canvas元素输出的二进制像素数据，就是类型化数组。 var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var uint8ClampedArray = imageData.data;三、WebSocket WebSocket可以通过ArrayBuffer，发送或接收二进制数据。 var socket = new WebSocket('ws://127.0.0.1:8081'); socket.binaryType = 'arraybuffer'; // Wait until socket is open socket.addEventListener('open', function (event) { // Send binary data var typedArray = new Uint8Array(4); socket.send(typedArray.buffer); }); // Receive binary data socket.addEventListener('message', function (event) { var arrayBuffer = event.data; // ··· });四、Fetch API Fetch API取回的数据，就是ArrayBuffer对象。 fetch(url) .then(function(request){ return request.arrayBuffer() }) .then(function(arrayBuffer){ // ... });五、File API 如果知道一个文件的二进制数据类型，也可以将这个文件读取为ArrayBuffer对象。 var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; var reader = new FileReader(); reader.readAsArrayBuffer(file); reader.onload = function () { var arrayBuffer = reader.result; // ··· }; 小结1、File对象从input选择或者拖拽中产生 files[0] File对象继承Blob，是种特殊的blob 2、blob 是二进制存储容器 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用） blob.slice 分段上传 3、FileReader 转成文本、ArrayBufffer、DATA url等类型 4、ArrayBufffer 是原始存储二进制的缓冲区，相当于定义了一块空间 5、通过TypeArray 生成内存的视图，代表确定类型的二进制数据 6、DataView也是生成视图的，可以自定义格式和字节序 PREVIOUS: NEXT: CSS篇2——有关布局的那些事 【音视频处理】纯js实现上传视频，截取关键帧作为封面，上传后端保存Tags: js， file， base64， File， Blob， ArrayBuffer 相关文章： |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |