如何從容的打包上傳圖片物件--File，Blob，BASE64詳解及轉換方法-有解無憂

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

File()

File() 構造器創建新的 File 物件實體，

語法

var myFile = new File(bits, name[, options]);

引數

bits

一個包含ArrayBuffer，ArrayBufferView，Blob，或者 DOMString 物件的 Array — 或者任何這些物件的組合，這是 UTF-8 編碼的檔案內容，

name

USVString，表示檔案名稱，或者檔案路徑，

options 可選

選項物件，包含檔案的可選屬性，可用的選項如下：

type: DOMString，表示將要放到檔案中的內容的 MIME 型別，默認值為 “” ，
lastModified: 數值，表示檔案最后修改時間的 Unix 時間戳（毫秒），默認值為 Date.now()，

示例

var file = new File(["my name"], "infoTxt", {
  type: "text/plain",
});

Blob()

Blob 物件表示一個不可變、原始資料的類檔案物件，它的資料可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于資料操作，

Blob 表示的不一定是JavaScript原生格式的資料，File 介面基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的檔案，同時 Blob 物件的API也被列在 File 介面中，

要從其他非blob物件和資料構造一個 Blob，請使用 Blob() 建構式，要創建一個 blob 資料的子集 blob，請使用 slice() 方法，要獲取用戶檔案系統上的檔案對應的 Blob 物件，請參閱 File 檔案，

語法

var aBlob = new Blob( array, options );

回傳一個新創建的 Blob 物件，其內容由引數中給定的陣列串聯組成，

引數

array 是一個由ArrayBuffer, ArrayBufferView, Blob, DOMString 等物件構成的 Array ，或者其他類似物件的混合體，它將會被放進 Blob，DOMStrings會被編碼為UTF-8，
options 是一個可選的BlobPropertyBag字典，它可能會指定如下兩個屬性：
- type，默認值為 “”，它代表了將會被放入到blob中的陣列內容的MIME型別，
- endings，默認值為"transparent"，用于指定包含行結束符\n的字串如何被寫入，它是以下兩個值中的一個： “native”，代表行結束符會被更改為適合宿主作業系統檔案系統的換行符，或者 “transparent”，代表會保持blob中保存的結束符不變

屬性

Blob.size 只讀

Blob 物件中所包含資料的大小（位元組），

Blob.type 只讀

一個字串，表明該 Blob 物件所包含資料的 MIME 型別，如果型別未知，則該值為空字串，

方法

Blob.slice([start[, end[, contentType]]])

回傳一個新的 Blob 物件，包含了源 Blob 物件中指定范圍內的資料，

Blob.stream()

回傳一個能讀取blob內容的 ReadableStream，

Blob.text()

回傳一個promise且包含blob所有內容的UTF-8格式的 USVString，

Blob.arrayBuffer()

回傳一個promise且包含blob所有內容的二進制格式的 ArrayBuffer

示例

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一個包含DOMString的陣列
const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob
oMyBlob.size // 32
oMyBlob.type // 'text/html'

Blob() 建構式允許通過其它物件創建 Blob 物件，比如，用字串構建一個 blob：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

使用 Blob 創建一個指向型別化陣列的URL

const imgBlob = fetchedImgData(); // 通過介面回傳的圖片資源，設定回傳的responseType為blob
const blob = new Blob([imgBlob], {type: 'image/png' }); // 傳入一個合適的 MIME 型別
const url = URL.createObjectURL(blob);
// 會產生一個類似 blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 這樣的URL字串
// 你可以像使用普通 URL 那樣使用它，比如用在 img.src 上，

從 Blob 中提取資料

一種從Blob中讀取內容的方法是使用 FileReader，以下代碼將 Blob 的內容作為型別陣列讀取：

const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.addEventListener("load ", function(readRes) {
   // readRes.target.result 轉化為arrayBuffer的 blob
});

另一種讀取Blob中內容的方式是使用Response物件，下述代碼將Blob中的內容讀取為文本：

var text = await new Response(blob).text();

通過使用 FileReader 的其它方法可以把 Blob 讀取為字串或者資料URL，

JS上傳圖片

我們要清楚，圖片的展示方式有三種：分別為file(檔案流)、bolb(本地流)、base64(二進制流)

file

File 介面提供有關檔案的資訊，并允許網頁中的 JavaScript 訪問其內容，

通常情況下， File 物件是來自用戶在一個元素上選擇檔案后回傳的 FileList 物件,也可以是來自由拖放操作生成的 DataTransfer 物件，或者來自 HTMLCanvasElement 上的 mozGetAsFile() API，在Gecko中，特權代碼可以創建代表任何本地檔案的File物件，而無需用戶互動

File 物件是特殊型別的 Blob，且可以用在任意的 Blob 型別的 context 中，比如說， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File，

blob

Blob 物件表示一個不可變、原始資料的類檔案物件，指向的是本地的臨時地址，Blob 表示的不一定是JavaScript原生格式的資料，File 介面基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統上的檔案，

base64

Base64 是一組相似的二進制到文本（binary-to-text）的編碼規則，使得二進制資料在解釋成 radix-64 的表現形式后能夠用 ASCII 字串的格式表示出來，Base64 這個詞出自一種 MIME 資料傳輸編碼，如果是圖片的base64，可以是可以用來壓縮

他們之間是可以相互轉化的，上傳圖片一般會拿到blob和file

圖片壓縮

壓縮我們選用canvas來進行壓縮，toDataURL方式會把圖片自動轉成base64

使用canvas壓縮圖片*代碼

export function translate(imgData, callback) {
	var img = new Image();
	img.src = https://www.cnblogs.com/smileZAZ/archive/2022/08/30/imgData.tempFilePaths[0];
	img.onload = function() {
		var that = this;
		var h = that.height; // 保證壓縮后的高度一樣		
		var w = that.width;  // 保證壓縮后的寬度一樣
		var canvas = document.createElement('canvas'); //創建canvas
		var ctx = canvas.getContext('2d'); //2d格式
		// 創建寬高屬性，并給canvas新的屬性節點
		var anw = document.createAttribute("width");
		anw.nodeValue = https://www.cnblogs.com/smileZAZ/archive/2022/08/30/w;
		var anh = document.createAttribute("height");
		anh.nodeValue = https://www.cnblogs.com/smileZAZ/archive/2022/08/30/h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		ctx.drawImage(that, 0, 0, w, h); // 繪畫到canvas里面		
		var quality = 0.1; //可以從 0 到 1 的區間內選擇圖片的質量，如果超出取值范圍，將會使用默認值 0.92，其他引數會被忽略
		var base64 = canvas.toDataURL('image/jpeg', quality);//轉換成base64
		canvas = null;
		var res = dataURLtoFile(base64,imgData.tempFiles[0].name);
		callback(res);
	}
}

base64轉file*代碼

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 base64toBlob(dataurl) { //base64轉blob
    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 Blob([u8arr], { type: mime });
}

blob轉base64*代碼

function blobToBase64(blob, callback) { //blob轉base64
    let reader = new FileReader();
    reader.onload = function (e) { callback(e.target.result); }
    reader.readAsDataURL(blob);
}

除了以上的方法也可以使用canvas轉化成base64

blob轉file*代碼

方法一：

function blobToFile(blob, fileName, type) {  //blob轉file
    let files = new window.File([blob], fileName, {type: type})
    return files
}

方法二：

function blobToFile(blob, fileName){  // blob轉file
	blob.lastModifiedDate = new Date();  
	blob.name = fileName;  
	return blob;
};

file轉bse64*代碼

function fileToBase64（file）{   //file轉bse64
	let reader = new FileReader();  
	reader.readAsDataURL(file);  
	reader.onload = function (e) {    
		return e.target.result  
	}
}

將圖片（路徑）轉為file型別

var image={
    /* 將圖片（路徑）轉換為Base64 */
    getBase64FromImageURL(url, callback) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            var base64URL = canvas.toDataURL('image/png');
            callback(base64URL);
            canvas = null;
        };
        img.src = https://www.cnblogs.com/smileZAZ/archive/2022/08/30/url;
    },
    /* 將base64轉換為file型別 */
    getFileFromBase64(base64URL, filename) {
        var arr = base64URL.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 });
    }
}
/* 測驗用例 */
image.getBase64FromImageURL('1.png', (base64URL)=> {
    console.log(base64URL);
    var imgURL = image.getFileFromBase64(base64URL, 'imgName');
    console.log(imgURL);
});

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503215.html

標籤：其他

上一篇：7個技巧讓你寫出干凈的 TSX 代碼

下一篇：提桶跑路前一天——整理組件