foreword
Under normal circumstances, when we write a project, we will get the data of the file from the backend, either base64 or byte array, and then we will convert it into a file through the obtained data, so this time the teaching How do you convert the byte array obtained by the backend into a file through JavaScript
step
First of all, we need to have a front-end interface trigger method, a simple button
<button @click='byteToFile'>byte转文件</button>
Above, I wrote a button, how to bind a method name:byteToFile
Then, we need to get the byte array passed to us by the backend:
let bytes = // 后端byte数组
In the form of:
Then the next step,
为了保证转换出来的文件能够正常的读取，我们需要知道需要把文件转换为什么格式
so here I write a common method of reading file formats for your reference:
// 传入一个字符串，返回对应的文件格式类型
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;
},
After the file format is available, the byte array will be officially converted to the 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});
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;
},
If you do not need to obtain the converted file and want to download it directly, refer to the following logic
/**
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);
},
epilogue
The above is the process of converting byte array to file