首页 > 编程语言 >短视频app源码,一文带你轻松搞懂前端大文件上传思路

短视频app源码,一文带你轻松搞懂前端大文件上传思路

时间:2024-04-13 09:33:05浏览次数:33  
标签:文件 const app 切片 源码 let inputFilesList 搞懂 上传

短视频app源码,一文带你轻松搞懂前端大文件上传思路

文件上传是我们在平时开发短视频app源码中经常会遇到的业务,如果只是简单的文件上传那还不足以作为项目亮点,而当我们给它加上切片、续传的功能,就不一样了。本文会带大家搞明白这些功能的实现思路,主要聚焦于 前端 部分,基于 Vue3来实现,暂时不涉及后端代码。

流程图

在这里插入图片描述

具体实现

1. HTML结构

<template>
  <div>
    <div class="btn" @click="openFileSelected">
      选择文件
    </div>
    <div class="btn" @click="upload">
      上传
    </div>
    <input ref="inputFileRef" class="input_file" type="file"multiple  @change="inputFileChange">
  </div>
</template>

 

2. 打开文件选择菜单
短视频app源码的页面通常是隐藏 input 标签,然后通过点击自己创建的按钮来间接触发 input 标签的 click 事件,从而打开选择文件菜单。
实现代码:

// 获取文件选择器实例
const inputFileRef = ref<HTMLInputElement>()

// 打开文件选择器
const openFileSelected = () => {
  if (inputFileRef.value) {
    inputFileRef.value.click()
  }
}

 

3. 监听文件选择事件

// 等待上传文件,支持多文件上传
const inputFilesList = reactive<any[]>([])

// 文件选择触发
const inputFileChange = (e: Event) => {
  // 获取选中的文件
  const files = (e.target as HTMLInputElement).files
  
  // 如果没有选择文件不做任何操作
  if (!files) return
  
  // 可能存在选中多文件,将其存入 inputFilesList 数组中,后续遍历上传。
  for (let i = 0; i < files?.length; i++) {
    inputFilesList.push(files[i])
  }
}

 

4.获取文件HASH值工具函数
如果采用 typescript 开发需要下载 @types/spark-md5

pnpm i spark-md5 @types/spark-md5

 

import SparkMD5 from 'spark-md5'

export function getHASH(file: File): Promise<any> {
  return new Promise((resolve, reject) => {
    // 要通过 spark-md5 得到 hash 需要先获取文件的buffer值
    const fileReader = new FileReader()
    fileReader.readAsArrayBuffer(file)
    fileReader.onload = (e) => {
      const BUFFER = e.target?.result
      if (!BUFFER) reject()
      const HASH = new SparkMD5.ArrayBuffer().append(BUFFER as ArrayBuffer).end()
      // 获取文件后缀,后续单独拼接切片文件名
      const suffix = (/\.([a-zA-Z0-9]+)$/.exec(file.name) as any)[1]
      resolve({
        HASH,
        suffix
      })
    }
  })
}

 

5. 进行文件切片并获取已上传过的切片
该小节是本文内容的核心,采取自带的slice 方法进行文件切割,然后进行上传,通过 complete 函数进行是否合并判断。

/**
 *  上传 
 */
const upload = async () => {
  // 判断是否有待上传的文件
  if (inputFilesList.length === 0) {
    alert('请选择文件')
    return
  }
 
  // 遍历文件数组
  for (let i = 0; i < inputFilesList.length; i++) {
    // 每个切片的固定大小
    let maxSize = 1024 * 1024 * 1
    
    const {
      HASH,
      suffix
    } = await changeBuffer(inputFilesList[i])
    let count = Math.ceil(inputFilesList[i].size / maxSize)
    // 当切片数量大于最大限制时候,采用固定数量,防止请求过多
    if (count > 100) {
      count = 100
      maxSize = inputFilesList[i].size / count
    }

    // 开始切片操作
    let index = 0
    //用来存储当前文件的切片
    let chunks = []
    while (index < count) {
      const sliceFile = inputFilesList[i].slice(index * maxSize, (index + 1) * maxSize)
      chunks.push({
        file: sliceFile,
        name: `${HASH}_${index}.${suffix}`
      })
      index++
    }
      
    // 在此处进行请求,获取该文件是否有已上传切片
    const uploadedFileList = await axios.get('/file')
    
    // 筛选出未上传的切片
    if (uploadedFileList.length) {
           chunks = chunks.filter(chunk => !uploadedFileList.includes(chunk))
    }
    
    // 用于判断是否上传完成
    let uplopedCount = 0
    const uploped = () => {
        uplopedCount++
        // 当所有切片都上传完成,像后端发送请求合并操作
        if (uplopedCount > count) {
            const result = axois.post('/merge', {
                hash: HASH
            })
        }
    }
      
    // 进行切片上传
    for (let i = 0; i < chunks.length; i++) {
      const fm = new formData()
      fm.append('file', chunks[i].file)
      fm.append('name', chunks[i].name)
      axios.post('/file', fm).then((result) => {
         // 如果当前切片上传成功,进入uploped函数,用于判断该文件切片是否全部上传完成。
         if (result.code === 200) uploped()
      })
    }
  }
}

 

总结

以上就是短视频app源码,一文带你轻松搞懂前端大文件上传思路, 更多内容欢迎关注之后的文章

 

标签:文件,const,app,切片,源码,let,inputFilesList,搞懂,上传
From: https://www.cnblogs.com/yunbaomengnan/p/18132506

相关文章

  • 视频直播源码,不同业务场景需选择不同方案去缓存数据
    视频直播源码,不同业务场景需选择不同方案去缓存数据在开发视频直播源码时,针对不同业务场景,我们应该选择不同的方案去缓存数据。本文就针对最常见的存储方案和场景做一些分类和介绍一些在Vue/React中的高阶用法,助力前端开发体验和应用的稳定性。前端缓存方案确定不同场......
  • 在线直播系统源码,前后端大文件上传代码分析
    在线直播系统源码,前后端大文件上传代码分析前端代码:<template><div><[email protected]="hanldeClick"class="upload_container"><inputname="请上传文件"type="file"ref="uploadRef"......
  • APP测试
    自我介绍测开自我介绍:偏嵌入式我叫柯泽灵,毕业于浙江大学信息与通信工程,目前在TPLINK的研发杭州分部测试8课担任自动化负责人,主要工作内容有两块,一是视频后端产品和智能家居产品的业务测试工作,包括测试用例开发、执行和缺陷跟踪;这块因为我们自动化小组主要负责相对成熟的产品,占......
  • flutterr 检测应用版本号、服务器下载文件 以及实现 App 自动升级、安装
    依赖package_info_plus:^7.0.0path_provider:^2.1.2#查找文件获取文件存储路径open_file:^3.3.2#打开文件插件permission_handler:^11.3.1#检测Apk是否拥有权限配置权限<!--在Android6(Marshmallow)之前的版本中,明确声明网络权限--><uses-perm......
  • uniapp实现虚拟列表(元素固定高度)
    一、应用场景当接口返回数据太多时,前端可使用虚拟列表,实现长列表。二、原理只有在屏幕部分元素被显示出来,并且被更新,始终只有固定数量的节点,不会卡顿。三、效果图四、思路步骤使用Object.freeze冻结对象,极大优化性能生成多个元素的options,或者动态获取根据onPag......
  • [题解][2022年江西省大学生程序设计竞赛] Remove and append
    题目描述给定一个包含n个整数的数组a。定义一个操作如下:从数组a中选择k个整数,将它们删除,并将它们的和追加到数组末尾。如果数组A比数组B(长度相同)字典序大,那么在A和B第一次不同的位置上,A的数字比B对应位置上的数字要大。例如,[0,1,14,0]比[0,1,5,6]字典序大,因为它们在第三......
  • 实验一 原型设计—游戏商城app
    问题一1.墨刀是一款在线原型工具,具有丰富的组件库和模板,允许设计师创建具有丰富交互元素的原型。可以快速创建各种类型的原型。还支持实时协作和云端存储,方便团队成员之间的沟通和合作。优点:墨刀支持实时协作,团队成员可以在原型上直接评论和批注,方便及时沟通和反馈;多人在线编......
  • 网易云音乐搜索与播放APP设计
    一、原型工具优缺点对比墨刀、Axure、Mockplus都是常见的原型设计工具,它们在适用领域和优缺点上有着各自的特点:墨刀:适用领域:墨刀适用于快速原型设计和团队协作。它的界面简洁易用,支持多种交互和动画效果,适合用于移动应用和网页的设计。优点:简单易上手,无需编码经验;提供在线协......
  • 背单词APP
    一、对墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点的分析1.墨刀适用领域:网页设计和移动应用界面设计快速原型制作和协作设计用户体验设计和交互设计优点:(1)界面直观,上手简单,适合初学者快速学习和使用。(2)支持实时协作,多人可以同时在同一个项目上工作,提高团队协......
  • apple 各手机尺寸说明
     iPhone是苹果公司最受欢迎的产品线之一,其尺寸从4英寸到6.7英寸不等。以下是iPhone各型号的尺寸:机型屏幕尺寸(英寸)分辨率(pt)像素(pixel)图片后缀iPhone4/4s 3.5(326ppi) 320x480 640x960 @2xiPhone5/5c/5s/SE1 4(326ppi) 320x568 640x1136 @2xiPhone6/6s/7/8/SE2-3 4.7(326ppi) 375......