2024年vue3多文件大文件分片上传（spark-md5），2024年最新高级Web前端开发面试解答之线程篇

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

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

file: Blob
hash: string
chunkIndex: number
chunkCount: string
fileName: string
}

五、储存的变量

// 已上传文件列表
const filesList = ref<NewFileType[]>([])
// 切片默认大小
let chunkSize = 1024 * 1024 * 5
// 上传文件切片列表
const filesSliceList = ref<FileSliceListType[]>([])

六、选择文件

// 选择文件
const choiceFileHandle = (e:Event) => {
if (uploadLoading.value) return
if (!e.target) return
choiceInputValue.value = null
const files = Array.prototype.slice.call((e as HTMLInputEvent).target.files)
const newFileList = […filesList.value, …files]
// 记得再次添加去重
// removeDuplicateObj是业务逻辑的去重
filesList.value = removeDuplicateObj(newFileList)
}

七、文件分片及查询已上传的分片

// 查询已上传的切片
const queryUploadFileHandle = async(file:NewFileType, hash:string) => {
let isRepeat = false
await queryUploadFlilePost({ hash }).then((res) => {
if (res.code !== 200) {
ElMessage.error(res.msg)
return
}
const resultList = res?.data?.resultList
// 当前文件大小
const fileSize = file.size
// 当前文件分割多少份 （chunkSize 多少大小分割）
let chunkCount = Math.ceil(fileSize / chunkSize)
if (fileSize > chunkSize * 40) {
chunkSize = chunkSize * 8
chunkCount = Math.ceil(fileSize / chunkSize)
}

for (let i = 0; i < chunkCount; i++) {
  // 当前 分割 开始点
  const startPoint = i \* chunkSize
  // 当前分割 结束点
  const endPoint = Math.min(startPoint + chunkSize, fileSize)
  const chunk = file.slice(startPoint, endPoint)
  // 存储分片状态
  filesSliceList.value.push({
    file: chunk,
    chunkCount: chunkCount.toString(),
    fileName: file.name,
    hash,
    chunkIndex: i
  })
}

if (resultList && resultList.length !== 0) {
  // 切片数组排除已上传的切片
  for (let i = 0; i < filesSliceList.value.length; i++) {
    const item:FileSliceListType = filesSliceList.value[i]
    if (item.hash === hash && resultList.includes(String(item.chunkIndex))) {
      filesSliceList.value.splice(i, 1)
      i--
    }
  }

  if (filesSliceList.value.length === 0) {
    isRepeat = true
  }
}

})
return isRepeat
}

八、所有文件分片同时上传

const promiseArr: unknown[] = []
// 全部上传
const allUploadHandle = async() => {
for (const file of filesList.value) {
if (file.hash) continue
const hash = await getFileMD5(file) as string
file.state = {
state_txt: ‘load’,
tips_txt: ‘处理中,请稍后’
}
file.hash = hash
file.progress = 0
file.speep = 0
// 文件切片处理及跳过已上传分片
const curFileIsRepeat = await queryUploadFileHandle(file, hash)
if (curFileIsRepeat) {
file.state = {
state_txt: ‘success’,
tips_txt: ‘上传成功！’
}
file.progress = 100
continue
}

file.state.tips_txt = '上传中，请稍后'

}

// 循环调用切片上传
for (const fileSlice of filesSliceList.value) {
const curFileIndex = filesList.value.findIndex(item => item.hash === fileSlice.hash)
const curFile = filesList.value[curFileIndex]
if (curFile.state.state_txt === ‘success’) continue
fileSliceUploadHandle(fileSlice)
}

Promise.all(promiseArr).then(() => {
const newFileList = filesList.value
for (let i = 0; i < newFileList.length; i++) {
const item = newFileList[i]
if (item.state.state_txt === ‘error’ || item.state.state_txt === ‘load’) {
nextBtnTips.value = ‘请删除上传失败的内容！’
nextBtnDisabled.value = true
} else {
nextBtnDisabled.value = false
}
}
}).catch((err) => {
console.log(‘文件上传失败：’, err)
// 。。。。。失败处理
})
}

// 文件切片上传
const fileSliceUploadHandle = (fileChunk:FileSliceListType) => {
const curFileIndex = filesList.value.findIndex(item => item.hash === fileChunk.hash)
const curFile = filesList.value[curFileIndex]
const { chunkCount, chunkIndex, file, fileName, hash } = fileChunk
const curPromise = new Promise((resolve, reject) => {
uploadDigFlie({
fileName,
file,
chunkIndex,
hash,
chunkCount
}).then(res => {
if (res.code !== 200) {
ElMessage.error(res.msg)
return reject(res.msg)
}
curFile.speep = 100 / Number(chunkCount)
curFile.progress += curFile.speep
if (curFile.progress > 100) {
curFile.progress = 100
}
if (Math.ceil(curFile.progress) >= 100) {
curFile.state = {
state_txt: ‘success’,
tips_txt: ‘上传成功！’
}
}
return resolve(true)
})
})
promiseArr.push(curPromise)
}

九、下一步（对应合并所有分片）

const nextPromiseArr: unknown[] = []
// 下一步
const goNextHanlde = () => {
if (nextBtnDisabled.value) return
uploadLoading.value = true
let allFileId = ‘’
for (let i = 0; i < filesList.value.length; i++) {
const item = filesList.value[i]
const index = i
// 合并过的文件跳过合并
if (item.isMerge) continue
nextPromiseArr[index] = new Promise((resolve) => {
mergechunkFilePost({
fileName: item.name,
hash: item.hash
}).then(res => {
if (res.code !== 200) {
ElMessage.error(res.msg)
item.isMerge = false
return resolve(true)
}
// 增加合并过标识
item.isMerge = true
return resolve(true)
})
})
}
Promise.all(nextPromiseArr).then(() => {
uploadLoading.value = false
const newFileList = filesList.value
for (let i = 0; i < newFileList.length; i++) {
const item = newFileList[i]
if (!item.isMerge) {
newFileList[i].state = {
state_txt: ‘error’,
tips_txt: ‘上传失败原因：内容重复！’
}
filesList.value = newFileList
GetCurrentInstance && GetCurrentInstance.proxy?.$forceUpdate()
return
}
ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

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

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。

webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。