如何從容的打包上傳圖片對象--File，Blob，BASE64詳解及轉換方法

来源:https://www.cnblogs.com/smileZAZ/archive/2022/08/30/16639985.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 File() File() 構造器創建新的 File 對象實例。 語法 var myFile = new File(bits, name[, options]); 參數 bits 一個包含ArrayBuffer，ArrayBufferVi ...


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

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 = 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 = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = 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 = 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);
});

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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在CentOS 7系統安裝StoneDB資料庫
    今天我會進行StoneDB資料庫在CentOS 7系統下的安裝。 官方的快速部署文檔中已有詳細的安裝流程，我會嚴格按照流程操作。 準備CentOS系統 我在本地虛擬機上安裝好了CentOS 7系統的2207版本。安裝過程比較順利，裝完系統後開啟ssh服務，就可以用ssh客戶端連接，先使用下麵的系統更 ...
  • DDL和DML
    DDL（Data Definition Languages）語句： 資料庫定義語句：用來創建資料庫中的表、索引、視圖、存儲過程、觸發器等 常用的語句關鍵字有：create，alter，drop，truncate，comment，rename DML（Data Manipulation Languag ...
  • 京東雲PostgreSQL在GIS場景的應用分享
    在地圖或地理信息有關的場景里，地址關鍵詞的檢索尤其重要。比如打開百度地圖，想要查詢某個位置的信息“北京市海澱區清華東路17號中國農業大學”，往往我們輸入的是關鍵詞“中國農業大學”而不是精確到街道的詳細地址信息。 ...
  • HMS Core基於地理位置請求廣告，流量變現快人一步
    對於想買車的用戶來說，如果走在路上刷社交軟體時突然在App里收到一條廣告：“前方500米商圈裡的某品牌汽車正在做優惠，力度大福利多。”不管買不買，八成都會去看看，原因有三：距離近、需求匹配、有優惠。那麼這就是一條成功的投放廣告，廣告最重要的就是尋找關鍵的客戶目標群，所以各App的營銷人員都在思考如何 ...
  • 如何創建前端 WebGPU 項目？
    1. 丐版 HelloWebGPU 最簡單的 WebGPU 程式應該是這樣的： <script> const init = () => { if ('gpu' in navigator) { console.log(navigator.gpu) } else { console.log('瀏覽器不支 ...
  • JavaScript快速入門-08-JSON
    8 JSON 因平時工作時，使用JSON的場景比較多，其JSON語法不再介紹，僅介紹在JavaScript中JSON的解析和序列化。 8.1 JSON 對象 JSON對象有兩個方法： stringify()：將JavaScript序列化為JSON字元串 parse()：將JSON解析為原生JavaS ...
  • VUE3.0+Antdv+Asp.net WebApi開發學生信息管理系統（完）
    在B/S系統開發中，前後端分離開發設計已成為一種標準，而VUE作為前端三大主流框架之一，越來越受到大家的青睞，Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統，簡述前後端分離開發的主要相關內容，僅供學習分享使用，如有不足之處，還請指... ...
  • 提桶跑路前一天——整理組件
    閑聊： 小穎今年四月底從西安跑到深圳來找工作，本來想著好好賺錢還房貸，結果快轉正了被通知要麼無薪待崗，要麼辦理離職，嗯~ o(*￣▽￣*)o.............................. 想罵人咋辦 ？ 小穎之前沒怎麼寫過小程式，到這邊後接手了離職小姐姐的工作，看代碼、看api、自己試 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類