最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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.csdn.net/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)]