利用Vue3+Element-plus实现大文件分片上传组件

 更新时间:2023年01月28日 14:19:24   作者:星海君的前端  
在开发中如果上传的文件过大,可以考虑分片上传,分片就是说将文件拆分来进行上传,将各个文件的切片传递给后台,然后后台再进行合并,下面这篇文章主要给大家介绍了关于利用Vue3+Element-plus实现大文件分片上传组件的相关资料,需要的朋友可以参考下

一、背景

实际项目中遇到需要上传几十个G的3d模型文件,传统上传就不适用了。

结合element提供的上传组件自己封装了文件分片上传的组件。

思路:

  • 把文件拆分成若干分片
  • 依次上传分片(每次上传前可校验该分片是否已经上传)
  • 发起合并分片的请求

二、技术栈

Vue3+Ts+Element-Plus

其他库:spark-md5

后端接口:

  • 上传分片接口
  • 校验分片是否已上传接口
  • 合并分片接口

三、核心代码实现

Element组件基础配置

<el-upload drag :file-list="fileList" :on-change="onUpload" :auto-upload="false" ref="uploadfile" :limit="1" :show-file-list="false" ></el-upload>

这里有个点:必须要定义file-list属性,不然clearFiles等官方外部方法没有效果

核心方法就是onUpload

const onUpload = async (File:any) => {
	const chunkSize = 30 * 1024 * 1024; // 分片大小
	const file = File.raw // 文件
	const fileSize = File.size // 文件大小
	let chunkCount = Math.ceil(fileSize / chunkSize) // 分片数量
	if(chunkSize > fileSize){ // 文件过小就一片
	    chunkCount = 1
	}
	// 文件md5,给文件一个唯一标识
	const fileMd5 = await getFileMd5(file, chunkCount, chunkSize); 
	// 上传分片
	for( let i=0;i<chunkCount;i++) {
    	const start = i * chunkSize //分片开始
    	const end = Math.min(fileSize, start + chunkSize) // 分片结束
    	const _chunkFile = File.raw.slice(start, end) // 分片文件
    	// 定义分片上传接口参数,跟后端商定
    	const formdata = new FormData()
	    formdata.append('chunkNumber', i.toString())
	    formdata.append('chunkSize', _chunkFile.size)
	    formdata.append('file', _chunkFile)
	    formdata.append('fileName', File.name)
	    formdata.append('fileSign', fileMd5)
	    formdata.append('totalChunks', chunkCount.toString())
	    formdata.append('totalChunkSize', fileSize)
    
	    // 检查分片文件是否上传-没有上传则上传
	    const params = { chunkNumber: i, fileSign: fileMd5 }
    	const { data } = await checkChunkFile(params) // 检验接口-自己定义
	    if(!data.flag){
	      console.log("开始上传第" + i + "个分片")
	      await uploadChunkFile(formdata) // 上传接口-自己定义
	    }
  	}
  	
	// 合并
	const mergeData = { // 合并参数
	    fileName: File.name, 
	    fileSign: fileMd5,
	    ...
	 }
	mergeFile(mergeData)// 合并接口-自己定义
}

getFileMd5方法生成文件md5

const getFileMd5 = (file: File, chunkCount: number, chunkSize: number) => {
  return new Promise((resolve, reject) => {
    const blobSlice = File.prototype.slice
    const chunks = chunkCount
    let currentChunk = 0
    const spark = new SparkMD5.ArrayBuffer()
    const fileReader = new FileReader()
    fileReader.onload = e => {
      spark.append(e.target?.result)
      currentChunk ++
      if(currentChunk < chunks){
        loadNext()
      } else {
        const md5 = spark.end()
        resolve(md5)
      }
    }
    fileReader.onerror = e => {
        reject(e)
    }
    function loadNext () {
        const start = currentChunk * chunkSize
        let end = start + chunkSize
        if(end > file.size){
            end = file.size
        }
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
    }
    loadNext()
  })
}

getFileMd5 方法是同步任务,文件过大会等待很久,可对页面进行优化处理,不然会造成卡着没进行请求的错觉。

四、总结

至于其他进度条、组件参数等代码忽略掉了,可根据实际情况设计。

上面的核心代码很多内容是还可以拆分的,优化空间很大。

该组件是一个一个分片的上传,去掉await 就可以测试多个文件上传。

到此这篇关于利用Vue3+Element-plus实现大文件分片上传组件的文章就介绍到这了,更多相关Vue3 Element-plus大文件分片上传组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue路由History模式分析

    Vue路由History模式分析

    Vue-router是Vue的核心组件,主要是作为Vue的路由管理器,Vue-router默认hash模式,通过引入Vue-router对象模块时配置mode属性可以启用history模式,本文将通过代码示例给大家详细分析Vue路由History模式
    2023-06-06
  • 浅谈vue中所有的封装方式总结

    浅谈vue中所有的封装方式总结

    因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,那么应该如何封装,本文就介绍一下如何封装,感兴趣的可以了解一下
    2021-07-07
  • vue实现在线翻译功能

    vue实现在线翻译功能

    这篇文章主要为大家详细介绍了vue实现在线翻译功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue使用原生swiper代码实例

    vue使用原生swiper代码实例

    这篇文章主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • Vue.js之VNode的使用

    Vue.js之VNode的使用

    这篇文章主要介绍了Vue.js之VNode的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue和小程序项目中使用iconfont的方法

    vue和小程序项目中使用iconfont的方法

    这篇文章主要介绍了vue中和小程序中使用iconfont的方法,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue实现iview表格添加筛选功能的示例代码

    vue实现iview表格添加筛选功能的示例代码

    本文主要介绍了vue实现iview表格添加筛选功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 使用Vue3和p5.js实现交互式图像动画

    使用Vue3和p5.js实现交互式图像动画

    这篇文章主要介绍了如何用Vue3和p5.js打造一个交互式图像动画,文中给出了详细的代码示例,本代码适用于需要在网页中实现图像滑动效果的场景,例如图片浏览、相册展示等,感兴趣的小伙伴跟着小编一起来看看吧
    2024-06-06
  • Vue实现页面刷新跳转到当前页面功能

    Vue实现页面刷新跳转到当前页面功能

    在Vue.js应用开发中,有时候我们需要实现页面的刷新或跳转到当前页面的功能,这种需求在某些特定场景下非常有用,本文将详细介绍如何在Vue中实现页面刷新和跳转到当前页面的功能,并提供多个示例和使用技巧,需要的朋友可以参考下
    2024-10-10
  • Vue调用后端java接口的实例代码

    Vue调用后端java接口的实例代码

    今天小编就为大家分享一篇Vue调用后端java接口的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论