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

海润

前言

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

步骤

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

复制代码

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

复制代码

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

1. byteToFile

复制代码

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

复制代码

1. let bytes = // 后端byte数组

复制代码

形式如:

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

复制代码

1. // 传入一个字符串，返回对应的文件格式类型
   
2.         extToMimes(ext) {
   
3.             let type = undefined;
   
4.             switch (ext) {
   
5.                             // 对应图片格式jpg
   
6.                 case 'jpg':
   
7.                     type = 'image/jpeg'
   
8.                     // 对应图片格式png
   
9.                 case 'png':
   
10.                     type = 'image/png'
    
11.                     // 对应图片格式jpeg
    
12.                 case 'jpeg':
    
13.                     type = 'image/jpeg'
    
14.                     break;
    
15.                     // 对应图片格式gif
    
16.                 case 'gif':
    
17.                         type ='image/gif'
    
18.                         break;
    
19.                         // 对应图片格式bmp
    
20.                 case 'bmp:
    
21.                         type = 'image/bmp'
    
22.                         break;
    
23.                         // 对应文本格式txt
    
24.                 case 'txt':
    
25.                     type = 'text/plain'
    
26.                     break;
    
27.                     // 对应表格格式xls
    
28.                 case 'xls':
    
29.                     type = 'application/vnd.ms-excel'
    
30.                     break;
    
31.                     // 对应word文档doc格式
    
32.                 case 'doc':
    
33.                     type = 'application/msword'
    
34.                     break;
    
35.                     // 对应文档格式pdf
    
36.                  case 'pdf':
    
37.                          type = 'application/pdf'
    
38.                          break;
    
39.                     // 对应表格格式xlsx
    
40.                 case 'xlsx':
    
41.                     type = 'application/vnd.ms-excel'
    
42.                     break;
    
43.                     // 对应表格格式csv
    
44.                 case 'csv':
    
45.                     type = 'text/csv'
    
46.                     break;
    
47.                     // 对应的视频格式一般是MPEG-4或者H.264编码的MP4格式
    
48.                 case 'mp4':
    
49.                         type = 'video/mp4'
    
50.                         break;
    
51.                         // 对应的视频格式一般是AVI格式
    
52.                        case 'avi':
    
53.                                type = 'video/x-msvideo'
    
54.                                break;
    
55.                                // 对应的视频格式一般是Windows Media Video格式
    
56.                        case 'WindowsMediaVideo':
    
57.                                type = 'video/x-ms-wmv'
    
58.                                break;
    
59.                                // 对应的视频格式一般是MOV格式，由苹果公司开发的
    
60.                        case 'mov':
    
61.                                type = 'video/quicktime'
    
62.                                break;
    
63.                                //  对应的视频格式一般是Flash视频格式，由Adobe公司开发的
    
64.                        case 'flash':
    
65.                                type = 'video/x-flv'
    
66.                                break;
    
67.                                // 对应的视频格式一般是MKV格式，开源免费的多媒体容器格式
    
68.                        case 'mkv':
    
69.                                type = 'video/x-matroska'
    
70.                                break;
    
71.                                // 对应音频格式mp3
    
72.                        case 'mp3':
    
73.                                type = 'audio/mpeg'
    
74.                                break;
    
75.                                // 对应音频格式wav
    
76.                        case 'wav':
    
77.                                type = 'audio/wav'
    
78.                                break;
    
79.                                // 对应音频格式flac
    
80.                        case 'flac':
    
81.                                type = 'audio/flac'
    
82.                                break;
    
83.                                // 对应音频格式aac
    
84.                                type = 'audio/aac'
    
85.                                break;
    
86.                                // 对应音频格式WMA
    
87.                        case 'wma':
    
88.                                type = 'audio/x-ms-wma'
    
89.                                break;
    
90.                 default:
    
91.                         type = 'text/plain'
    
92.                         break;
    
93.             }
    
94.             return type;
    
95.         },

复制代码

1. 文件格式有了之后正式的将byte数组转文件

复制代码

1. /**
   
2. byte : 后端接收到的byte数组
   
3. _type : 文件类型
   
4. name : 文件名称，不带后缀
   
5. */
   
6.         byteToFile(byte,_type,name) {
   
7.                 // 调用上面写的方法，读取获取到文件格式
   
8.             let fileType = this.extToMimes(_type);
   
9.             // 将后端的byte数组进行处理
   
10.             const bytes = new Uint8Array(byte);
    
11.             // 将byte数组转换为blob类型
    
12.             var blob = new Blob([bytes],{type: fileType});
    
13.             console.log("转换后文件:",blob)
    
14.             // 以上blob可直接拿来使用做自己的逻辑操作
    
15.             // 以下将blob转为File文件类型
    
16.             blob1.lastModifiedDate = new Date(); // 使用当前时间作为文件的修改时间
    
17.             blob1.name = name; // 指定文件名
    
18.             var file = new File([blob], name);
    
19.             console.log("File类型文件:",file)
    
20.             return file;
    
21.         },

复制代码

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

复制代码

1. /**
   
2. byte : 后端接收到的byte数组
   
3. _type : 文件类型
   
4. name : 文件名称，不带后缀
   
5. */
   
6.         byteToFile(byte,_type,name) {
   
7.                 // 调用上面写的方法，读取获取到文件格式
   
8.             let fileType = this.extToMimes(_type);
   
9.             // 将后端的byte数组进行处理
   
10.             const bytes = new Uint8Array(byte);
    
11.             // 将byte数组转换为blob类型
    
12.             var blob = new Blob([bytes],{type: fileType});
    
13.             // 创建一个a标签，设置不可见
    
14.             var eleLink = document.createElement('a');
    
15.             eleLink.download = name;
    
16.             eleLink.style.display = 'none';
    
17.             // 将文件加入到a标签
    
18.             eleLink.href = URL.createObjectURL(blob);
    
19.             // 自动触发点击
    
20.             document.body.appendChild(eleLink);
    
21.             eleLink.click();
    
22.             // 最后移除a标签
    
23.             document.body.removeChild(eleLink);
    
24.         },

复制代码

结语

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

来源:https://www.jb51.net/javascript/319202m0d.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！