JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件
更新時間：2024年04月03日 10:30:55 作者：相與還
這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
前言
一般情況下，在我們寫項目的時候，都會從后端獲取到文件的數(shù)據(jù)，要么是base64，要么是byte數(shù)組，然后我們再通過拿到的數(shù)據(jù)額外做出來轉(zhuǎn)換為文件的，那么這次教大家如何通過JavaScript將后端拿到的byte數(shù)組轉(zhuǎn)為文件
步驟
首先，我們需要有一個前端界面觸發(fā)方法，來一個簡單的按鈕
<button @click='byteToFile'>byte轉(zhuǎn)文件</button>
上面，我寫了一個按鈕，如何綁定了一個方法名:byteToFile
然后，我們需要拿到后端傳給我們的byte數(shù)組:
let bytes = // 后端byte數(shù)組
形式如:
接著下一步，為了保證轉(zhuǎn)換出來的文件能夠正常的讀取，我們需要知道需要把文件轉(zhuǎn)換為什么格式于是我這邊寫一個常用的讀取文件格式的方法供大家參考:
// 傳入一個字符串，返回對應(yīng)的文件格式類型
extToMimes(ext) {
let type = undefined;
switch (ext) {
// 對應(yīng)圖片格式j(luò)pg
case 'jpg':
type = 'image/jpeg'
// 對應(yīng)圖片格式png
case 'png':
type = 'image/png'
// 對應(yīng)圖片格式j(luò)peg
case 'jpeg':
type = 'image/jpeg'
break;
// 對應(yīng)圖片格式gif
case 'gif':
type ='image/gif'
break;
// 對應(yīng)圖片格式bmp
case 'bmp:
type = 'image/bmp'
break;
// 對應(yīng)文本格式txt
case 'txt':
type = 'text/plain'
break;
// 對應(yīng)表格格式xls
case 'xls':
type = 'application/vnd.ms-excel'
break;
// 對應(yīng)word文檔doc格式
case 'doc':
type = 'application/msword'
break;
// 對應(yīng)文檔格式pdf
case 'pdf':
type = 'application/pdf'
break;
// 對應(yīng)表格格式xlsx
case 'xlsx':
type = 'application/vnd.ms-excel'
break;
// 對應(yīng)表格格式csv
case 'csv':
type = 'text/csv'
break;
// 對應(yīng)的視頻格式一般是MPEG-4或者H.264編碼的MP4格式
case 'mp4':
type = 'video/mp4'
break;
// 對應(yīng)的視頻格式一般是AVI格式
case 'avi':
type = 'video/x-msvideo'
break;
// 對應(yīng)的視頻格式一般是Windows Media Video格式
case 'WindowsMediaVideo':
type = 'video/x-ms-wmv'
break;
// 對應(yīng)的視頻格式一般是MOV格式，由蘋果公司開發(fā)的
case 'mov':
type = 'video/quicktime'
break;
// 對應(yīng)的視頻格式一般是Flash視頻格式，由Adobe公司開發(fā)的
case 'flash':
type = 'video/x-flv'
break;
// 對應(yīng)的視頻格式一般是MKV格式，開源免費的多媒體容器格式
case 'mkv':
type = 'video/x-matroska'
break;
// 對應(yīng)音頻格式mp3
case 'mp3':
type = 'audio/mpeg'
break;
// 對應(yīng)音頻格式wav
case 'wav':
type = 'audio/wav'
break;
// 對應(yīng)音頻格式flac
case 'flac':
type = 'audio/flac'
break;
// 對應(yīng)音頻格式aac
type = 'audio/aac'
break;
// 對應(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可直接拿來使用做自己的邏輯操作
// 以下將blob轉(zhuǎn)為File文件類型
blob1.lastModifiedDate = new Date(); // 使用當(dāng)前時間作為文件的修改時間
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)建一個a標(biāo)簽，設(shè)置不可見
var eleLink = document.createElement('a');
eleLink.download = name;
eleLink.style.display = 'none';
// 將文件加入到a標(biāo)簽
eleLink.href = URL.createObjectURL(blob);
// 自動觸發(fā)點擊
document.body.appendChild(eleLink);
eleLink.click();
// 最后移除a標(biāo)簽
document.body.removeChild(eleLink);
},
結(jié)語
以上就是byte數(shù)組轉(zhuǎn)文件的過程
到此這篇關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的文章就介紹到這了,更多相關(guān)JS后端獲取byte數(shù)組轉(zhuǎn)文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
picChange圖片切換特效的封裝函數(shù)，能夠根據(jù)圖片html代碼自動生成右下角的數(shù)字導(dǎo)航按鈕。2010-05-05
下面小編就為大家?guī)硪黄狫avascript字符串拼接小技巧(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
javascript實現(xiàn)瀏覽器窗口傳遞參數(shù)的方法
這篇文章主要介紹了javascript實現(xiàn)瀏覽器窗口傳遞參數(shù),需要的朋友可以參考下2014-09-09
JavaScript新功能介紹之findLast()和findLastIndex()
最近工作中遇到了一個關(guān)于查找數(shù)組里面的目標(biāo)元素的方法,所以下面這篇文章主要給大家介紹了關(guān)于JavaScript新功能之findLast()?和findLastIndex()的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
getter使我們能夠?qū)傩越壎ǖ皆谠L問屬性時調(diào)用的函數(shù),而setter將屬性綁定到在嘗試設(shè)置屬性時調(diào)用的函數(shù),下面就跟隨小編來看看TypeScript中Getter/Setter的用法吧2024-10-10
javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能示例
這篇文章主要介紹了javascript實現(xiàn)移動端 HTML5 圖片上傳預(yù)覽和壓縮功能,結(jié)合實例形式分析了javascript移動端 HTML5 圖片上傳預(yù)覽和壓縮功能具體實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
ES6（ECMAScript 6,也稱為ES2015）是JavaScript的一個重要更新版本,引入了許多新的語言特性和改進(jìn),使得JavaScript變得更加現(xiàn)代化、易讀、易維護(hù)和更適合大型應(yīng)用程序的開發(fā),ES6的主要變化歸納為：語法糖、新機(jī)制、更好的語義、更多的內(nèi)置對象和方法2023-11-11
在本章中，我們將分析John Resig關(guān)于JavaScript繼承的一個實現(xiàn) - Simple JavaScript Inheritance,需要的朋友可以參考下2016-10-10
JS中setTimeout和setInterval的最大延時值詳解
這篇文章主要介紹了JS中setTimeout和setInterval的最大延時值的相關(guān)資料，文中通過示例代碼介紹的很詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-02-02
在項目開發(fā)中，我們往往會遇到一個頁面需要加載很多圖片的情況。這篇文章主要介紹了頁面性能優(yōu)化原生JS實現(xiàn)圖片懶加載 ,需要的朋友可以參考下2019-04-04