2024年前端最全vue3多文件大文件分片上传（spark-md5），大专生面试阿里P7居然过了

最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

html

 <div class="operate-btn-bar">
   <div class="btn choice">
     选择文件
     <input
       @change="choiceFileHandle"
       ref=""
       :value="choiceInputValue"
       class="upload-input"
       type="file"
       multiple/>
   </div>
   <div
     v-show="filesList.length !== 0"
     class="btn upload"
     @click="allUploadHandle"
     v-throttle
   >
   全部上传
 </div>
<!--
- ...
- ...
- ...
-->
<div class="next-bar">
 <el-tooltip
   class="box-item"
   effect="dark"
   :content="nextBtnTips"
   placement="top-start"
   :disabled="!nextBtnDisabled"
 >
   <div class="next-btn" :class="{'disabled':nextBtnDisabled}" @click="goNextHanlde" v-throttle>
     <span>下一步</span>
     <el-icon><ArrowRight /></el-icon>
   </div>
 </el-tooltip>
</div>

一、下载spark-md5

npm install spark-md5
npm install @types/spark-md5 -D

二、引入spark-md5

import SparkMD5 from 'spark-md5'

三、获取hash值

// 文件获取hash值
const getFileMD5 = (file:File) => {
  return new Promise((resolve, reject) => {
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()
    fileReader.onload = (e: ProgressEvent<FileReader>):void => {
      spark.append(e.target?.result)
      resolve(spark.end())
    }
    fileReader.onerror = () => {
      reject('')
    }
    fileReader.readAsArrayBuffer(file)
  })
}

四、定义类型

interface NewFileType extends File {
  speep: number // 分片上传进度
  progress: number // ui显示的进度值
  fileId: string
  // 整个文件上传的状态
  state: {
    state_txt: string;
    tips_txt: string
  }
  // 文件hash
  hash?: string
  // 是否合并过
  isMerge?: boolean
}
// 分片文件列表
interface FileSliceListType {
  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
    }


### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)