您现在的位置是：首页 > 技术教程正文

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

admin 阅读： 2024-03-31

后台-插件-广告管理-内容页头部广告（手机）

前言

一般情况下，在我们写项目的时候，都会从后端获取到文件的数据，要么是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); },

结语

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

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）