JavaScript如何将后端获取到的byte数组转为文件

前言

一般情况下，在我们写项目的时候，都会从后端获取到文件的数据，要么是base64，要么是byte数组，然后我们再通过拿到的数据额外做出来转换为文件的，那么这次教大家如何通过JavaScript将后端拿到的byte数组转为文件

步骤

首先，我们需要有一个前端界面触发方法，来一个简单的按钮

<button @click=\’byteToFile\’>byte转文件</button>

上面，我写了一个按钮，如何绑定了一个方法名:byteToFile

然后，我们需要拿到后端传给我们的byte数组:

let bytes = // 后端byte数组

形式如:

接着下一步，为了保证转换出来的文件能够正常的读取，我们需要知道需要把文件转换为什么格式于是我这边写一个常用的读取文件格式的方法供大家参考:

// 传入一个字符串，返回对应的文件格式类型
extToMimes(ext) {
let type = undefined;
switch (ext) {
// 对应图片格式jpg
case \’jpg\’:
type = \’image/jpeg\’
// 对应图片格式png
case \’png\’:
type = \’image/png\’
// 对应图片格式jpeg
case \’jpeg\’:
type = \’image/jpeg\’
break;
// 对应图片格式gif
case \’gif\’:
type =\’image/gif\’
break;
// 对应图片格式bmp
case \’bmp:
type = \’image/bmp\’
break;
// 对应文本格式txt
case \’txt\’:
type = \’text/plain\’
break;
// 对应表格格式xls
case \’xls\’:
type = \’application/vnd.ms-excel\’
break;
// 对应word文档doc格式
case \’doc\’:
type = \’application/msword\’
break;
// 对应文档格式pdf
case \’pdf\’:
type = \’application/pdf\’
break;
// 对应表格格式xlsx
case \’xlsx\’:
type = \’application/vnd.ms-excel\’
break;
// 对应表格格式csv
case \’csv\’:
type = \’text/csv\’
break;
// 对应的视频格式一般是MPEG-4或者H.264编码的MP4格式
case \’mp4\’:
type = \’video/mp4\’
break;
// 对应的视频格式一般是AVI格式
case \’avi\’:
type = \’video/x-msvideo\’
break;
// 对应的视频格式一般是Windows Media Video格式
case \’WindowsMediaVideo\’:
type = \’video/x-ms-wmv\’
break;
// 对应的视频格式一般是MOV格式，由苹果公司开发的
case \’mov\’:
type = \’video/quicktime\’
break;
// 对应的视频格式一般是Flash视频格式，由Adobe公司开发的
case \’flash\’:
type = \’video/x-flv\’
break;
// 对应的视频格式一般是MKV格式，开源免费的多媒体容器格式
case \’mkv\’:
type = \’video/x-matroska\’
break;
// 对应音频格式mp3
case \’mp3\’:
type = \’audio/mpeg\’
break;
// 对应音频格式wav
case \’wav\’:
type = \’audio/wav\’
break;
// 对应音频格式flac
case \’flac\’:
type = \’audio/flac\’
break;
// 对应音频格式aac
type = \’audio/aac\’
break;
// 对应音频格式WMA
case \’wma\’:
type = \’audio/x-ms-wma\’
break;
default:
type = \’text/plain\’
break;
}
return type;
},

文件格式有了之后正式的将byte数组转文件

/**
byte : 后端接收到的byte数组
_type : 文件类型
name : 文件名称，不带后缀
*/
byteToFile(byte,_type,name) {
// 调用上面写的方法，读取获取到文件格式
let fileType = this.extToMimes(_type);
// 将后端的byte数组进行处理
const bytes = new Uint8Array(byte);
// 将byte数组转换为blob类型
var blob = new Blob([bytes],{type: fileType});
console.log(\”转换后文件:\”,blob)
// 以上blob可直接拿来使用做自己的逻辑操作
// 以下将blob转为File文件类型
blob1.lastModifiedDate = new Date(); // 使用当前时间作为文件的修改时间
blob1.name = name; // 指定文件名
var file = new File([blob], name);
console.log(\”File类型文件:\”,file)
return file;
},

假如你不需要获取转换后的文件，想直接下载，参考如下逻辑

/**
byte : 后端接收到的byte数组
_type : 文件类型
name : 文件名称，不带后缀
*/
byteToFile(byte,_type,name) {
// 调用上面写的方法，读取获取到文件格式
let fileType = this.extToMimes(_type);
// 将后端的byte数组进行处理
const bytes = new Uint8Array(byte);
// 将byte数组转换为blob类型
var blob = new Blob([bytes],{type: fileType});
// 创建一个a标签，设置不可见
var eleLink = document.createElement(\’a\’);
eleLink.download = name;
eleLink.style.display = \’none\’;
// 将文件加入到a标签
eleLink.href = URL.createObjectURL(blob);
// 自动触发点击
document.body.appendChild(eleLink);
eleLink.click();
// 最后移除a标签
document.body.removeChild(eleLink);
},