Vue 实现上传文件下载文件功能（二进制流文件）_vue 二进制流 下载文件

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

uploadBlobData(params).then(res => { //uploadBlobData为我的后端请求
if(res.data.status == 200) {
this.$message.success(“上传附件成功”)
}
});
},

5. 字符串相关工具类方法：

 

// 数组根据指定分隔符重组为字符串
export const strRebuild = (arr, split) => {
if (
arr === undefined ||
arr === null ||
!(arr instanceof Array) ||
arr.length === 0
) {
return “”;
}
if (split === undefined || split === null) {
split = “,”;
}
var str = “”;
arr.forEach((v, i) => {
if (i === arr.length - 1) {
str = str + v;
} else {
str = str + v + split;
}
});
return str;
};

// 截取最后一个指定字符后面的字符串
export const lastSubstring = (str, split) => {
if (
str === undefined ||
str === null ||
split === undefined ||
split === null
) {
return “”;
}
return str.substring(str.lastIndexOf(split) + 1);
};

export default {
strRebuild,
lastSubstring
};

##### 3.2 下载文件


1. 思路：


	* 向后端发送GET请求获取附件列表；
	* 将Base64形式的二进制文件流转换为Blob格式进行下载；
2. 请求后端获取文件数据，因为上传附件时通过向后端发送POST请求将文件以Blob形式存在了数据库表中，所以向后端发送GET请求获取文件数据；

 

queryAttachment(mailId) {
let params = {
tableName: “ATTACHMENT”,
page: 1,
sort: “TIME”,
where: “MAIL_ID,eq,'” + mailId + “'”
};
queryData(params).then(res => { //queryData为我的后端请求
this.attachmentList = res.data.data; //附件列表
});
}

3. 页面上每个文件后需要一个下载的按钮

 

<el-row
v-for=“file in attachmentList”
:key=“file.ID”

<el-col :span="18">{{file.FILE_NAME}}</el-col>
<el-col :span="6">
  <el-button plain size="mini" @click="downloadFile(file)">下载</el-button>
</el-col>

4. 下载文件，将Base64形式的二进制文件转换为Blob类型，**注意要根据文件类型设置下载Blob时的类型**；

 

downloadFile(file) {
let fileType = lastSubstring(file.FILE_NAME, “.”);
let blob = bs64toBlob(
file.FILE_CONTENT,
this.downloadBlobContentType[fileType.toLowerCase()]
); //file.FILE_CONTENT为Base64形式的二进制数据
if (“download” in document.createElement(“a”)) {
let elink = document.createElement(“a”);
elink.download = file.FILE_NAME;
elink.style.display = “none”;
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
navigator.msSaveBlob(blob, file.FILE_NAME);
}
},

5. 根据文件类型设置下载Blob时对应的type类型，如果需要更多类型，扩展该对象数据即可；

 

//下载blob二进制文件时对应的type类型
downloadBlobContentType: {
txt: “text/plain”,
xls: “application/vnd.ms-excel”,
xlsx:
“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”,
doc: “application/msword”,
docx:
“application/vnd.openxmlformats-officedocument.wordprocessingml.document”,
ppt: “application/vnd.ms-powerpoint”,
pptx:
“application/vnd.openxmlformats-officedocument.presentationml.presentation”,
visio: “application/vnd.visio”,
pdf: “application/pdf”,
png: “image/png”,
jpg: “image/jpeg”,
jpeg: “image/jpeg”,
zip: “application/zip”,
rar: “application/x-rar-compressed”
}

6. base64 转换为 Blob的方法，新建文件`base64toBlob.js`。

 

// base64 转换为 Blob
export const bs64toBlob = (bs64Data, contentType, sliceSize) => {
contentType = contentType || “”;
sliceSize = sliceSize || 512;

var byteCharacters = window.atob(bs64Data);
var byteArrays = [];

for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, { type: contentType });
return blob;
};

export default {
bs64toBlob
};

### 最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

![](https://img-blog.csdnimg.cn/img_convert/a0f00a692e8b8e50acb894bc1160d9a1.webp?x-oss-process=image/format,png)



![前端面试题宝典](https://img-blog.csdnimg.cn/img_convert/6723fa9d631d976368814b0c128b67ca.webp?x-oss-process=image/format,png)

![前端校招面试题详解](https://img-blog.csdnimg.cn/img_convert/ef5fdc5a71465838ab2006f655edfe12.webp?x-oss-process=image/format,png)



9e65ecb71ac0)**

**《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》**

[外链图片转存中...(img-PQNa1YNf-1715827165134)]



[外链图片转存中...(img-3OrnhaWn-1715827165135)]

[外链图片转存中...(img-NnNMX4jl-1715827165136)]