JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件
更新時間：2024年04月03日 10:30:55 作者：相與還
這篇文章主要給大家介紹了關(guān)于JavaScript如何將后端獲取到的byte數(shù)組轉(zhuǎn)為文件的相關(guān)資料,文中通過代碼介紹的非常詳細,對大家的學(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ù)組進行處理
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ù)組進行處理
const bytes = new Uint8Array(byte);
// 將byte數(shù)組轉(zhuǎn)換為blob類型
var blob = new Blob([bytes],{type: fileType});
// 創(chuàng)建一個a標簽，設(shè)置不可見
var eleLink = document.createElement('a');
eleLink.download = name;
eleLink.style.display = 'none';
// 將文件加入到a標簽
eleLink.href = URL.createObjectURL(blob);
// 自動觸發(fā)點擊
document.body.appendChild(eleLink);
eleLink.click();
// 最后移除a標簽
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)文章
我們很容易被漂亮的代碼吸引，也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不，我就收集了一系列形如 是否為……？ 的判斷的boolean函數(shù)2012-08-08
這篇文章主要介紹了javascript使用prototype完成單繼承的方法及示例代碼，有需要的小伙伴參考下2014-12-12
模塊化JavaScript的概念尤為強烈，似乎有趕超07年Ajax風(fēng)潮之趨勢2012-03-03
這篇文章主要介紹了微信小程序新聞網(wǎng)站詳情頁的實例代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Visual Studio中JS調(diào)試的方法,需要的朋友可以參考下2014-06-06
本文主要介紹了js實現(xiàn)手機發(fā)送驗證碼功能的示例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單擲骰子效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
自定義指令是微信小程序中用于增強模板功能的重要工具,通過合理使用自定義指令,可以提高代碼的可維護性和復(fù)用性,簡化頁面邏輯的編寫和管理,這篇文章主要介紹了微信小程序自定義指令,需要的朋友可以參考下2024-07-07
本文通過實例代碼給大家介紹的使用JavaScript中的lodash編寫雙色球效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
顯示本地時間的方法有很多，在本文將為大家介紹下如何使用html+js實現(xiàn)動態(tài)顯示本地時間，感興趣的朋友可以了解下2013-09-09