文件上传之vuejs分块上传,js同理,可实现暂停、续传等
前段代码分块代码核心代码为:const blob = rawFile.slice(start, end)案例示例:文件大于5242880(大概5M)时,我们将大文件拆分为5M大小的多个小块上传,后端再做拼接。这样不会出现,超大文件带来的一系列问题,并且可以实现暂停续传等操作。一下为示例:async function uploadEcm(rawFile, folderId) {const oktok
·
前段代码
分块代码核心代码为:
const blob = rawFile.slice(start, end)
案例示例:
文件大于5242880(大概5M)时,我们将大文件拆分为5M大小的多个小块上传,后端再做拼接。这样不会出现,超大文件带来的一系列问题,并且可以实现暂停续传等操作。
一下为示例:
async function uploadEcm(rawFile, folderId) {
const oktoken = await getToken()
const firstN = rawFile.name.split('.')
const fileName = firstN[0] + Math.random().toString(36) + '.' + firstN[firstN.length - 1]
const data = new FormData()
data.append('fileName', fileName)
data.append('token', oktoken)
data.append('folderId', folderId) // TODO
data.append('size', rawFile.size)
data.append('type', rawFile.type)
data.append('attachType', 0)
data.append('fileModel', 'UPLOAD')
data.append('name', '')
console.log('rawFile', rawFile)
const result = await getRegHash(data, oktoken)
let start = 0
let end = 0
const lentgh = 5242880
const uploadId = guid()
// 分块数
const chunks = Math.ceil(rawFile.size / 5242880)
if (chunks == 1) {
await blockUpload(result, fileName, rawFile, chunks, 0, lentgh, rawFile.size, rawFile, oktoken, uploadId)
} else if (chunks > 1) {
for (let i = 0; i < chunks; i++) {
let blockSize = lentgh
if (i == (chunks - 1)) {
blockSize = rawFile.size - end
end = rawFile.size
} else {
end = start + lentgh
}
const blob = rawFile.slice(start, end)
start = end
await blockUpload(result, fileName, rawFile, chunks, i, lentgh, blockSize, blob, oktoken, uploadId)
}
}
return new Promise(resolve => {
resolve(result)
})
}
将每块上传后台:
function blockUpload(res, fileName, rawFile, chunks, i, lentgh, blockSize, blob, oktoken, uploadId) {
return new Promise(resolve => {
const data2 = new FormData()
data2.append('uploadId', uploadId)
data2.append('regionHash', res.data.data.RegionHash)
data2.append('regionId', res.data.data.RegionId)
data2.append('fileName', fileName)
data2.append('size', rawFile.size)
data2.append('chunks', chunks)
data2.append('chunk', i)
data2.append('chunkSize', lentgh)
data2.append('blockSize', blockSize)
data2.append('file', blob)
console.log('res', res)
myaxios.post(getEcmBaseUrl() + '/document/upload?code=&token=' + oktoken, data2, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
resolve(true)
}).catch(reason => {
resolve(false)
})
})
}
更多推荐
所有评论(0)