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

 更新时间:2024年04月03日 10:30:55   作者:相与还  
这篇文章主要给大家介绍了关于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);
        },

结语

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

到此这篇关于JavaScript如何将后端获取到的byte数组转为文件的文章就介绍到这了,更多相关JS后端获取byte数组转文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • picChange 图片切换特效的函数代码

    picChange 图片切换特效的函数代码

    picChange图片切换特效的封装函数,能够根据图片html代码自动生成右下角的数字导航按钮。
    2010-05-05
  • Javascript字符串拼接小技巧(推荐)

    Javascript字符串拼接小技巧(推荐)

    下面小编就为大家带来一篇Javascript字符串拼接小技巧(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript实现浏览器窗口传递参数的方法

    javascript实现浏览器窗口传递参数的方法

    这篇文章主要介绍了javascript实现浏览器窗口传递参数,需要的朋友可以参考下
    2014-09-09
  • JavaScript新功能介绍之findLast()和findLastIndex()

    JavaScript新功能介绍之findLast()和findLastIndex()

    最近工作中遇到了一个关于查找数组里面的目标元素的方法,所以下面这篇文章主要给大家介绍了关于JavaScript新功能之findLast() 和findLastIndex()的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • TypeScript中Getter/Setter用法详解

    TypeScript中Getter/Setter用法详解

    getter使我们能够将属性绑定到在访问属性时调用的函数,而setter将属性绑定到在尝试设置属性时调用的函数,下面就跟随小编来看看TypeScript中Getter/Setter的用法吧
    2024-10-10
  • javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    javascript实现移动端 HTML5 图片上传预览和压缩功能示例

    这篇文章主要介绍了javascript实现移动端 HTML5 图片上传预览和压缩功能,结合实例形式分析了javascript移动端 HTML5 图片上传预览和压缩功能具体实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • js的es6常用新特性详解

    js的es6常用新特性详解

    ES6(ECMAScript 6,也称为ES2015)是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为:语法糖、新机制、更好的语义、更多的内置对象和方法
    2023-11-11
  • JavaScript 继承详解(五)

    JavaScript 继承详解(五)

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance,需要的朋友可以参考下
    2016-10-10
  • JS中setTimeout和setInterval的最大延时值详解

    JS中setTimeout和setInterval的最大延时值详解

    这篇文章主要介绍了JS中setTimeout和setInterval的最大延时值的相关资料,文中通过示例代码介绍的很详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-02-02
  • 原生JS实现图片懒加载之页面性能优化

    原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况。这篇文章主要介绍了页面性能优化原生JS实现图片懒加载 ,需要的朋友可以参考下
    2019-04-04

最新评论