c++ socket send file_JS 檔案base64、File、Blob、ArrayBuffer 介紹及互轉
技術標籤：c++ socket send filecant open file for writingdelphi dbgrideh 欄位顯示為blobfailed to open log fileinputstream轉file物件js blob 轉 file
今天介紹一下檔案的二進位制家族js,file,base64,File,Blob,ArrayBuffer。案例，假如有一個需求，我們通過解析等方式拿到了檔案的二進位制uint8array 或者base64或者blob，我們如何通過ajax提交給後端介面呢？
二進位制互轉
file物件轉base64
let reader = new FileReader();
reader.readAsDataURL(file[0])
console.log(reader)
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});
}
blob 轉成ArrayBuffer
let blob = new Blob([1,2,3,4])
let reader = new FileReader();
reader.onload = function(result) {
console.log(result);
}
reader.readAsArrayBuffer(blob);
buffer 轉成blob
let blob = new Blob([buffer])
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也是生成檢視的，可以自定義格式和位元組序
