這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
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/p/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/p/w;
var anh = document.createAttribute("height");
anh.nodeValue = https://www.cnblogs.com/smileZAZ/p/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/p/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/503205.html
標籤：JavaScript