1.大文件上传Vue完整代码（切片上传、码原秒传、码原断点续传）

大文件上传Vue完整代码（切片上传、码原秒传、码原tpshop开源商城 源码断点续传）

       原创不易，码原注释都在代码中，码原web 手机端源码点赞收藏不迷路~

1.安装依赖

       npmi-Sspark-md5

2.对接api（需后端接口支持）/**@Description:大文件上传接口*@Author:zhangy*@Date:--::*@LastEditors:zhangy*@LastEditTime:--::*/importrequestfrom'@/utils/request'//校验exportfunctiongetUploadStatus(data){ returnrequest({ url:'api/file/part/check',码原method:'get',params:data})}//上传exportfunctionsliceUpload(data){ returnrequest({ url:'api/file/part/upload',method:'post',data})}//合并exportfunctionmergeUpload(data){ returnrequest({ url:'api/file/part/merge',method:'get',params:data})}exportdefault{ getUploadStatus,sliceUpload,mergeUpload}3.封装切片上传的mixin/**@Description:大文件上传、分片上传、码原断点续传、码原文件秒传*@Author:zhangy*@Date:--::*@LastEditors:zhangy*@LastEditTime:--::*/constSparkMD5=require('spark-md5')import{ getUploadStatus,码原sliceUpload,mergeUpload}from'@/api/chunksUploadAPI'//切片大小(单位:B)constCHUNK_SIZE=5**/***@description:分块计算文件的md5值*@param{ *}file文件*@param{ *}chunkSize分片大小*@returns{ *}*/functioncalculateFileMd5(file,chunkSize){ returnnewPromise((resolve,reject)=>{ constblobSlice=File.prototype.slice||File.prototype.mozSlice||File.prototype.webkitSliceconstchunks=Math.ceil(file.size/chunkSize)letcurrentChunk=0constspark=newSparkMD5.ArrayBuffer()constfileReader=newFileReader()fileReader.onload=function(e){ spark.append(e.target.result)currentChunk++if(currentChunk<chunks){ loadNext()}else{ constmd5=spark.end()resolve(md5)}}fileReader.onerror=function(e){ reject(e)}functionloadNext(){ conststart=currentChunk*chunkSizeletend=start+chunkSizeif(end>file.size){ end=file.size}fileReader.readAsArrayBuffer(blobSlice.call(file,start,end))}loadNext()})}/***@description:分块计算文件的md5值*@param{ *}file文件*@returns{ Promise}*/functioncalculateFileMd5ByDefaultChunkSize(file){ returncalculateFileMd5(file,CHUNK_SIZE)}/***@description:文件切片*@param{ *}file*@param{ *}size切片大小*@returns[{ file}]*/functioncreateFileChunk(file,size=CHUNK_SIZE){ constchunks=[]letcur=0while(cur<file.size){ chunks.push({ file:file.slice(cur,cur+size)})cur+=size}returnchunks}/***@description:获取文件的后缀名*/functiongetFileType(fileName){ returnfileName.substr(fileName.lastIndexOf('.')+1).toLowerCase()}/***@description:根据文件的md5值判断文件是否已经上传过了*@param{ *}md5文件的md5*@param{ *}准备上传的文件*@returns{ Promise}*/functioncheckMd5(md5,file){ returnnewPromise(resolve=>{ getUploadStatus({ md5}).then(res=>{ if(res.data.code===){ //文件已经存在了，秒传（后端直接返回已上传的码原文件）resolve({ uploaded:true,url:res.data.msg,code:res.data.code})}elseif(res.data.code===){ //文件不存在需要上传resolve({ uploaded:false,url:'',code:res.data.code})}else{ resolve({ uploaded:false,url:'',code:})}}).catch(()=>{ resolve({ uploaded:false,url:'',code:})})})}/***@description:执行分片上传*@param{ *}file上传的文件*@param{ *}i第几分片，从0开始*@param{ *}md5文件的码原md5值*@param{ *}vm虚拟dom指向组件this*@returns{ Promise}*/functionPostFile(file,i,md5,vm){ constname=file.name//文件名constsize=file.size//总大小constshardCount=Math.ceil(size/CHUNK_SIZE)//总片数if(i>=shardCount){ return}conststart=i*CHUNK_SIZEconstend=start+CHUNK_SIZEconstpacket=file.slice(start,end)//将文件进行切片/*构建form表单进行提交*/constform=newFormData()form.append('md5',md5)//前端生成uuid作为标识符传个后台每个文件都是一个uuid防止文件串了form.append('file',packet)//slice方法用于切出文件的一部分form.append('name',name)form.append('totalSize',size)form.append('total',shardCount)//总片数form.append('index',i+1)//当前是第几片returnnewPromise((resolve,reject)=>{ sliceUpload(form).then(res=>{ if(res.data.code===){ //拿到已上传过的切片resolve({ uploadedList:res.data.chunkList?res.data.chunkList.map(item=>`${ md5}-${ item}`):[]})}elseif(res.data.code===){ resolve({ uploadedList:[]})}else{ resolve({ uploadedList:[],code:})//reject()}}).catch(()=>{ //reject()resolve({ uploadedList:[],code:})})})}/***@description:合并文件*@param{ *}shardCount分片数*@param{ *}fileName文件名*@param{ *}md5文件md值*@param{ *}fileType文件类型*@param{ *}fileSize文件大小*@returns{ Promise}*/functionmerge(shardCount,fileName,md5,fileType,fileSize){ returnmergeUpload({ shardCount,fileName,md5,fileType,fileSize})}exportdefault{ data(){ return{ chunks:[],percent:0,percentCount:0}},methods:{ /***@description:上传文件*@param{ *}file文件*@returns{ Object}包含成功的文件地址、名称等*/asyncchunksUpload(file){ this.chunks=[]//step1获取文件切片constinitChunks=createFileChunk(file)//step2获取文件md5值constmd5=awaitcalculateFileMd5ByDefaultChunkSize(file)//step3获取文件的码原虎付支付源码上传状态const{ uploaded,url,code}=awaitcheckMd5(md5,file)if(uploaded){ //step4如果上传成功this.percent=//step5拿到结果returnurl}if(!uploaded&&code===){ returnthis.errorInfo()}//step4如果文件未传成功，执行切片上传const{ uploadedList}=awaitPostFile(file,码原0,md5,this)//todo方法1：逐次发送请求constrequestList=[]//请求集合initChunks.forEach(async(chunk,index)=>{ //过滤掉已上传的切片if(uploadedList.indexOf(md5+'-'+(index+1))<0){ constfn=()=>{ returnPostFile(file,index,md5,this)}requestList.push(fn)}})letreqNum=0//记录发送的请求个数constsend=async()=>{ if(reqNum>=requestList.length){ //step5如果所有切片已上传，执行合并constres=awaitmerge(initChunks.length,码原file.name,md5,getFileType(file.name),file.size)if(res.data.code===){ returnres.data.msg}else{ this.errorInfo()return{ }}}constsliceRes=awaitrequestList[reqNum]()if(sliceRes.code&&sliceRes.code===){ returnthis.errorInfo()}//计算当下所上传切片数constcount=initChunks.length-uploadedList.lengthif(this.percentCount===0){ this.percentCount=/count}this.percent+=this.percentCountreqNum++returnsend()}constmergeResult=awaitsend()returnmergeResult//todo方法2：使用Promise.all统一发送请求//constrequestList=initChunks.map(async(chunk,index)=>{ ////过滤掉已上传的切片//if(uploadedList.indexOf(md5+'-'+(index+1))<0){ //returnPostFile(file,index,md5,this)//}//})//returnPromise.all(requestList)//.then(async()=>{ //constres=awaitmerge(initChunks.length,file.name,md5,getFileType(file.name),file.size)//if(res.data.code===){ //returnres.data.msg//}//})//.catch(()=>{ //returnthis.$message.error('出错了，请稍后重试！云驴通源码')//})},/***@description:错误提示*/errorInfo(){ this.$message.error('出错了，请稍后重试！')}}}4.使用<template><divid="app"><el-uploadref="vedioUpload"actiondrag:limit="1"accept=".mp4":auto-upload="false":show-file-list="false":on-change="onFileChange"><iclass="el-icon-upload"/><divclass="el-upload__text">将文件拖到此处，安卓parted源码或<em>点击上传</em></div></el-upload><div>上传进度:{ { percent.toFixed()+'%'}}</div><divv-if="videoUrl"class="video-box"><video:src="videoUrl"controls/></div></div></template><script>importchunksUploadfrom'@/mixins/chunks-upload.js'exportdefault{ mixins:[chunksUpload],data(){ return{ videoUrl:''}}methods:{ asynconFileChange(file){ this.clearVideoUpload()constfileType=file.raw.typeconstfileSize=file.raw.size//if(fileType!=='video/mp4')returnthis.$message.error('只能上传MP4格式的视频！')if(fileSize>)returnthis.$message.error('视频大小不能超过1G！')constres=awaitthis.chunksUpload(file.raw)console.log('上传结果',res)},clearVideoUpload(){ this.videoUrl=''this.percent=0}}}</script><stylelang="scss"scoped>.video-box{ width:px;height:px;video{ width:%;height:%;}}</style>原文：/post/