JavaScript 将后端 Byte 数组转换为文件的方法

作者:异步漫步时间:2026-10-31 12:59:23浏览:296

本文介绍如何在 JavaScript 中将后端返回的 Byte 数组转换为前端可用的文件对象。通过 Uint8Array 和 Blob 构造函数处理数据,并结合 MIME 类型判断,实现文件的生成与直接下载功能,适用于前后端分离架构下的文件处理场景。

前言

在常规项目开发中,前端通常需要从后端获取文件数据,数据格式多为 Base64 编码或 Byte 数组。获取这些数据后,前端需进行额外处理以生成可使用的文件。本文将演示如何利用 JavaScript 将后端返回的 Byte 数组转换为前端文件对象。

步骤

首先,需要在前端界面创建一个触发方法,例如添加一个简单的按钮元素。

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

上述按钮绑定了名为 byteToFile 的点击事件处理方法。

接下来,需要获取后端传输过来的 Byte 数组数据:

let bytes = // 后端byte数组

数据格式示例如下:

前言

为了确保转换后的文件能够被正确读取,需要明确目标文件的格式。以下提供一个常用的工具方法,用于将文件扩展名映射为对应的 MIME 类型:

// 传入一个字符串,返回对应的文件格式类型
        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 数组转换为文件的全过程。

至此,关于 JavaScript 将后端获取的 Byte 数组转换为文件的内容介绍完毕。如需了解更多相关 JS 后端 Byte 数组转文件的内容,请搜索本站历史文章或继续浏览后续相关文章,感谢支持。

作者最新文章