一、相關基礎知識
構造函數
FileReader() 返回一個新構造的FileReader
事件處理
FileReader.onabort 處理abort事件。該事件在讀取操作被中斷時觸發。
FileReader.onload 處理load事件。該事件在讀取操作完成時觸發。
FileReader.onloadstart 處理loadstart事件。該事件在讀取操作開始時觸發。
FileReader.onloadend 處理loadend事件。該事件在讀取操作結束時（要么成功，要么失敗）觸發。
FileReader.onprogress 處理progress事件。該事件在讀取Blob時觸發。\
方法：
FileReader.readAsArrayBuffer() 一旦完成，result屬性中將包含所讀取文件的原始二進制數據。
FileReader.readAsDataURL () 一旦完成，result屬性中將包含一個data: URL格式的Base64字符串以表示所讀取文件的內容。
FileReader.readAsText () 一旦完成，result屬性中將包含一個字符串以表示所讀取的文件內容。
Window atob() 方法
atob()方法用於解碼使用 base-64 編碼的字符串。
window.atob(encodedStr) 該方法返回一個解碼的字符串。
charCodeAt() 方法
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。
//在字符串 "Hello world!" 中，我們將返回位置 1 的字符的 Unicode 編碼： var str="Hello world!" document.write(str.charCodeAt(1)) //以上代碼的輸出是：101
ArrayBuffer 與 Blob
ArrayBuffer對象用來表示通用的、固定長度的原始二進制數據緩沖區。
Blob (binary large object)，二進制大對象，是一個可以存儲二進制文件的容器。
Blob是一個大文件，典型的Blob是一張圖片或者一個聲音文件，由於他們的尺寸，必須使用特殊的方式來處理
var blob = new Blob(dataArr:Array<any>, opt:{type:string});
- dataArray：數組，包含了要添加到Blob對象中的數據，數據可以是任意多個ArrayBuffer，ArrayBufferView， Blob，或者 DOMString對象。
- opt：對象，用於設置Blob對象的屬性（如：MIME類型）
ArrayBuffer轉Blob
// arraybuffer轉blob很方便，作為參數傳入就行了。
var buffer = new ArrayBuffer(16)
var blob = new Blob([buffer]) //注意：一定要用方括號包住
Blob轉ArrayBuffer
此處需要借助fileReader對象:
var blob = new Blob([1,2,3,4,5])
var reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = function() {
console.log(this.result)
}
// 控制台輸出的則是ArrayBuffer的數據了。
ArrayBuffer和Blob一樣，都是二進制數據的容器，而ArrayBuffer相比更為底層，他可以去操作去修改這些二進制值，這兩者之間也是可以互轉的。
二、js實現圖片資源，Blob base64 ArrayBuffer 的各種轉換
html
<body> <input type="file" id="shangchuan" onchange="filechange()"> <div class="tup"> <img id="img" src=""> </div> </body>
js
ArrayBuffer轉Blob
function filechange(){
let files = document.getElementById("shangchuan").files[0];
let type = files.type
console.log("files",files)
geturl(files,type)
}
function geturl(files,type){
let reads = new FileReader();
reads.readAsArrayBuffer(files);
reads.onload = function(e){
console.log(reads.result)
console.log(new Blob([reads.result],{'type':type}))
// 注意：里面的this指的就是reads，所以reads.result == this.result
//document.getElementById("img").src = this.result;
}
}
文件轉BASE64
function getBase64(File,callback){
var reader = new FileReader(); //IE10+
var AllowImgFileSize = 2100000; //上傳圖片最大值(單位字節)（ 2 M = 2097152 B ）超過2M上傳失敗
var File = File||$("#shangchuan").get(0).files[0]; //獲取上傳的文件對象
/*
FileList {0: File, 1: File, length: 2} 多個文件
File:{name: "fan.jpg", lastModified: 1559019043288, lastModifiedDate: Tue May 28 2019 12:50:43 GMT+0800 (中國標准時間), webkitRelativePath: "", size: 3346145, type: "image/jpeg"}
FileList {0: File, 1: File, length: 2} 單個文件
*/
if (File) {
//讀取指定的 Blob 或 File 對象 觸發loadend 事件 並將圖片的base64編碼賦值給result
reader.readAsDataURL(File);
//reader.readAsText(File)
//異步通信 回調函數返回
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64碼部分（可選可不選，需要與后台溝通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上傳失敗，請上傳不大於2M的圖片！');
return;
}else{
var base64Data=reader.result;
//返回base64編碼
callback(base64Data);
}
}
}
}
BASE64轉文件
function Base64toFile(dataurl, filename) {//將base64轉換為文件
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
base64轉blob
方法一
function convertBase64UrlToBlob(base64){ var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64頭的type如 'image/png' var bytes=window.atob(base64.split(',')[1]);//去掉url的頭，並轉換為byte (atob:編碼 btoa:解碼) //處理異常,將ascii碼小於0的轉換為大於0 var ab = new ArrayBuffer(bytes.length);//通用的、固定長度(bytes.length)的原始二進制數據緩沖區對象 //var ia = new Uint8Array(bytes.length); for (var i = 0; i < bytes.length; i++) { ab[i] = bytes.charCodeAt(i); } let blob = new Blob( [ab] , {type :type}); console.log(blob) }
方法二
function convertBase64UrlToBlob(base64){
var type =base64.split(",")[0].match(/:(.*?);/)[1];//提取base64頭的type如 'image/png'
var bytes=window.atob(base64.split(',')[1]);//去掉url的頭，並轉換為byte (atob:編碼 btoa:解碼)
//處理異常,將ascii碼小於0的轉換為大於0
//var ab = new ArrayBuffer(bytes.length);//通用的、固定長度(bytes.length)的原始二進制數據緩沖區對象
var ia = new Uint8Array(bytes.length);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
let blob = new Blob( [ia] , {type :type});
console.log(blob)
}
blob轉base64
function blobToBase64(blob, callback) {
let a = new FileReader();
a.onload = function (e) { callback(e.target.result); }
a.readAsDataURL(blob);
}
通過XHR的方法來轉轉Blob
let xhr = new XMLHttpRequest();
xhr.open("get", "http://mybg.oss-cn-hangzhou.aliyuncs.com/2019031510452423", true);
xhr.responseType = "blob";
xhr.onload = function (res) {
if (this.status == 200) {
var blob = this.response;
}
}
xhr.send();
只知道文件的下載路徑（url），把文件轉換成BASE64
function toDataUrl(url) {
return new Promise(function (resolve) {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
resolve(reader.result);
};
reader.readAsDataURL(xhr.response);
};
xhr.open("GET", url);
xhr.responseType = "blob";
xhr.send();
})
}