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

前言

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

步骤

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

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

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

byteToFile

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

let bytes =// 后端byte数组

形式如:

接着下一步，

为了保证转换出来的文件能够正常的读取，我们需要知道需要把文件转换为什么格式

于是我这边写一个常用的读取文件格式的方法供大家参考:

// 传入一个字符串，返回对应的文件格式类型extToMimes(ext){let type =undefined;switch(ext){// 对应图片格式jpgcase'jpg':
                    type ='image/jpeg'// 对应图片格式pngcase'png':
                    type ='image/png'// 对应图片格式jpegcase'jpeg':
                    type ='image/jpeg'break;// 对应图片格式gifcase'gif':
                    type ='image/gif'break;// 对应图片格式bmpcase 'bmp:
                    type ='image/bmp'break;// 对应文本格式txtcase'txt':
                    type ='text/plain'break;// 对应表格格式xlscase'xls':
                    type ='application/vnd.ms-excel'break;// 对应word文档doc格式case'doc':
                    type ='application/msword'break;// 对应文档格式pdfcase'pdf':
                     type ='application/pdf'break;// 对应表格格式xlsxcase'xlsx':
                    type ='application/vnd.ms-excel'break;// 对应表格格式csvcase'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;// 对应音频格式mp3case'mp3':
                       type ='audio/mpeg'break;// 对应音频格式wavcase'wav':
                       type ='audio/wav'break;// 对应音频格式flaccase'flac':
                       type ='audio/flac'break;// 对应音频格式aac
                       type ='audio/aac'break;// 对应音频格式WMAcase'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 =newUint8Array(byte);// 将byte数组转换为blob类型var blob =newBlob([bytes],{type: fileType});
            console.log("转换后文件:",blob)// 以上blob可直接拿来使用做自己的逻辑操作// 以下将blob转为File文件类型
            blob1.lastModifiedDate =newDate();// 使用当前时间作为文件的修改时间
            blob1.name = name;// 指定文件名var file =newFile([blob], name);
            console.log("File类型文件:",file)return file;},

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

/**
byte : 后端接收到的byte数组
_type : 文件类型
name : 文件名称，不带后缀
*/byteToFile(byte,_type,name){// 调用上面写的方法，读取获取到文件格式let fileType =this.extToMimes(_type);// 将后端的byte数组进行处理const bytes =newUint8Array(byte);// 将byte数组转换为blob类型var blob =newBlob([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);},

结语

以上就是byte数组转文件的过程