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

川长思鸟来 2024-03-22 17:32 103阅读 0赞

## 前言 ##

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

## 步骤 ##

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

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

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

--------------------

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

let bytes = // 后端byte数组

形式如:  
![在这里插入图片描述][d0fdb81449464202a565f64a4a61b721.png]

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

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

[d0fdb81449464202a565f64a4a61b721.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2a55abda69f447bb8206c29bdb6c6ccb.png