因为要跟后端交互,上传前要拿到文件的已上传信息,所以要给后端传MD5码,这个需要先计算出文件的MD5码,用 spark-md5 插件来计算
一、计算出文件的MD5值
要配合js的 FileReader 函数来使用 SparkMD5
import SparkMD5 from 'spark-md5'
getMD5(file, fileListID) {
const spark = new SparkMD5.ArrayBuffer()
const fileReader = new FileReader()
fileReader.onload = (e) => {
spark.append(e.target.result)
const _md5 = spark.end()
console.log(_md5)
}
fileReader.readAsArrayBuffer(file)
},
二、把单个文件切分成小片上传
chunkSize: 2097152,
chunkTotal: Math.ceil(file.size / this.chunkSize),
fragmentUpload(fileItem) {
for (let i = fileItem.currentChunk; i <= fileItem.chunkTotal; i++) {
let start = i === 1 ? 0 : (i - 1) * this.chunkSize
let end = start + this.chunkSize >= fileItem.fileSize ? fileItem.fileSize : start + this.chunkSize
console.log('start:', start)
console.log('end:', end)
const chunkFile = fileItem.file.slice(start, end)
const _shardSize = end === fileItem.fileSize ? end - start : this.chunkSize
let formObj = new FormData()
formObj.append('file', chunkFile)
formObj.append('name', fileItem.fileName)
formObj.append('type', fileItem.type)
formObj.append('hashCode', fileItem.fileMD5)
formObj.append('size', fileItem.fileSize)
formObj.append('shardIndex', _shardIndex.toString())
formObj.append('shardSize', _shardSize)
formObj.append('shardTotal', fileItem.chunkTotal)
apiUploadFileByChunk(formObj).then((res) => {
if (res.status === '0') {
if (fileItem.currentChunk >= fileItem.chunkTotal) {
fileItem.progressNumber = 100
fileItem.status = '2'
this.countNumber++
this.startUpload()
} else {
fileItem.currentChunk++
fileItem.progressNumber = Math.floor(fileItem.currentChunk / fileItem.chunkTotal * 100)
}
} else {
fileItem.status = '3'
}
}).catch(() => {
fileItem.status = '3'
})
_shardIndex++
}
},
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)