JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件

更新時(shí)間：2024年04月03日 10:30:55 作者：相與還

這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

一般情況下，在我們寫項(xiàng)目的時(shí)候，都會(huì)從后端獲取到文件的數(shù)據(jù)，要么是base64，要么是byte數(shù)組，然后我們?cè)偻ㄟ^拿到的數(shù)據(jù)額外做出來(lái)轉(zhuǎn)換為文件的，那么這次教大家如何通過JavaScript將后端拿到的byte數(shù)組轉(zhuǎn)為文件

步驟

首先，我們需要有一個(gè)前端界面觸發(fā)方法，來(lái)一個(gè)簡(jiǎn)單的按鈕

<button @click='byteToFile'>byte轉(zhuǎn)文件</button>

上面，我寫了一個(gè)按鈕，如何綁定了一個(gè)方法名:byteToFile

然后，我們需要拿到后端傳給我們的byte數(shù)組:

let bytes = // 后端byte數(shù)組

形式如:

接著下一步，為了保證轉(zhuǎn)換出來(lái)的文件能夠正常的讀取，我們需要知道需要把文件轉(zhuǎn)換為什么格式于是我這邊寫一個(gè)常用的讀取文件格式的方法供大家參考:

// 傳入一個(gè)字符串，返回對(duì)應(yīng)的文件格式類型
        extToMimes(ext) {
            let type = undefined;
            switch (ext) {
            		// 對(duì)應(yīng)圖片格式j(luò)pg
                case 'jpg':
                    type = 'image/jpeg'
                    // 對(duì)應(yīng)圖片格式png
                case 'png':
                    type = 'image/png'
                    // 對(duì)應(yīng)圖片格式j(luò)peg
                case 'jpeg':
                    type = 'image/jpeg'
                    break;
                    // 對(duì)應(yīng)圖片格式gif
                case 'gif':
                	type ='image/gif'
                	break;
                	// 對(duì)應(yīng)圖片格式bmp
                case 'bmp:
                	type = 'image/bmp'
                	break;
                	// 對(duì)應(yīng)文本格式txt
                case 'txt':
                    type = 'text/plain'
                    break;
                    // 對(duì)應(yīng)表格格式xls
                case 'xls':
                    type = 'application/vnd.ms-excel'
                    break;
                    // 對(duì)應(yīng)word文檔doc格式
                case 'doc':
                    type = 'application/msword'
                    break;
                    // 對(duì)應(yīng)文檔格式pdf
                 case 'pdf':
                 	type = 'application/pdf'
                 	break;
                    // 對(duì)應(yīng)表格格式xlsx
                case 'xlsx':
                    type = 'application/vnd.ms-excel'
                    break;
                    // 對(duì)應(yīng)表格格式csv
                case 'csv':
                    type = 'text/csv'
                    break;
                    // 對(duì)應(yīng)的視頻格式一般是MPEG-4或者H.264編碼的MP4格式
                case 'mp4':
                	type = 'video/mp4'
                	break;
                	// 對(duì)應(yīng)的視頻格式一般是AVI格式
               	case 'avi':
               		type = 'video/x-msvideo'
               		break;
               		// 對(duì)應(yīng)的視頻格式一般是Windows Media Video格式
               	case 'WindowsMediaVideo':
               		type = 'video/x-ms-wmv'
               		break;
               		// 對(duì)應(yīng)的視頻格式一般是MOV格式，由蘋果公司開發(fā)的
               	case 'mov':
               		type = 'video/quicktime'
               		break;
               		//  對(duì)應(yīng)的視頻格式一般是Flash視頻格式，由Adobe公司開發(fā)的
               	case 'flash':
               		type = 'video/x-flv'
               		break;
               		// 對(duì)應(yīng)的視頻格式一般是MKV格式，開源免費(fèi)的多媒體容器格式
               	case 'mkv':
               		type = 'video/x-matroska'
               		break;
               		// 對(duì)應(yīng)音頻格式mp3
               	case 'mp3':
               		type = 'audio/mpeg'
               		break;
               		// 對(duì)應(yīng)音頻格式wav
               	case 'wav':
               		type = 'audio/wav'
               		break;
               		// 對(duì)應(yīng)音頻格式flac
               	case 'flac':
               		type = 'audio/flac'
               		break;
               		// 對(duì)應(yīng)音頻格式aac
               		type = 'audio/aac'
               		break;
               		// 對(duì)應(yīng)音頻格式WMA
               	case 'wma':
               		type = 'audio/x-ms-wma'
               		break;
                default:
                	type = 'text/plain'
                	break;
            }
            return type;
        },

文件格式有了之后正式的將byte數(shù)組轉(zhuǎn)文件

/**
byte : 后端接收到的byte數(shù)組
_type : 文件類型
name : 文件名稱，不帶后綴
*/
        byteToFile(byte,_type,name) {
        	// 調(diào)用上面寫的方法，讀取獲取到文件格式
            let fileType = this.extToMimes(_type);
            // 將后端的byte數(shù)組進(jìn)行處理
            const bytes = new Uint8Array(byte);
            // 將byte數(shù)組轉(zhuǎn)換為blob類型
            var blob = new Blob([bytes],{type: fileType});
            console.log("轉(zhuǎn)換后文件:",blob)
            // 以上blob可直接拿來(lái)使用做自己的邏輯操作
            // 以下將blob轉(zhuǎn)為File文件類型
            blob1.lastModifiedDate = new Date(); // 使用當(dāng)前時(shí)間作為文件的修改時(shí)間
            blob1.name = name; // 指定文件名
            var file = new File([blob], name);
            console.log("File類型文件:",file)
            return file;
        },

假如你不需要獲取轉(zhuǎn)換后的文件，想直接下載，參考如下邏輯

/**
byte : 后端接收到的byte數(shù)組
_type : 文件類型
name : 文件名稱，不帶后綴
*/
        byteToFile(byte,_type,name) {
        	// 調(diào)用上面寫的方法，讀取獲取到文件格式
            let fileType = this.extToMimes(_type);
            // 將后端的byte數(shù)組進(jìn)行處理
            const bytes = new Uint8Array(byte);
            // 將byte數(shù)組轉(zhuǎn)換為blob類型
            var blob = new Blob([bytes],{type: fileType});
            // 創(chuàng)建一個(gè)a標(biāo)簽，設(shè)置不可見
            var eleLink = document.createElement('a');
            eleLink.download = name;
            eleLink.style.display = 'none';
            // 將文件加入到a標(biāo)簽
            eleLink.href = URL.createObjectURL(blob);
            // 自動(dòng)觸發(fā)點(diǎn)擊
            document.body.appendChild(eleLink);
            eleLink.click();
            // 最后移除a標(biāo)簽
            document.body.removeChild(eleLink);
        },

結(jié)語(yǔ)

以上就是byte數(shù)組轉(zhuǎn)文件的過程

到此這篇關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的文章就介紹到這了,更多相關(guān)JS后端獲取byte數(shù)組轉(zhuǎn)文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: