本文最主要参考的是这一篇，后端也是用django来完成。
大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://www.atool.online/article/206178.htm
参考的代码地址：https://github.com/ClearlightY/FileUpload
vue-simple-upload文档：https://github.com/simple-uploader/Uploader
<template>
<div id='global-uploader'>
<uploader
ref='uploader'
:options='options'
:autoStart='false'
:file-status-text='statusText'
@file-added='onFileAdded'
@file-success='onFileSuccess'
@file-progress='onFileProgress'
@file-error='onFileError'
@file-removed='onfileRemoved'
class='uploader-app'
>
<uploader-unsupport></uploader-unsupport>
<!-- 文件拖拽上传区域-->
<uploader-drop id='global-uploader-drop'>
<uploader-btn id='global-uploader-btn' :attrs='attrs' ref='uploadBtn'>
<div class='hzs-upload-icon'>
<svg viewBox='0 0 1024 1024' data-icon='inbox' width='1em' height='1em' fill='currentColor'
aria-hidden='true'
focusable='false' class=''>
<path
d='M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z'></path>
</svg>
</div>
<p class='hzs-upload-title'>Click or drag file(.zip) to this area to upload datasets</p>
<p class='hzs-upload-description'>Just support for a single file, multiple uploads will be overwritten by the
latter.</p>
</uploader-btn>
</uploader-drop>
<!--文件列表-->
<uploader-list>
<div class='file-panel' slot-scope='props'>
<ul class='file-list' ref='fileList'>
<li v-for='file in props.fileList' :key='file.id'>
<uploader-file :class="'file_' + file.id" ref='files' :file='file' :list='true'></uploader-file>
<!-- <!– 不重要的–>-->
<!-- <div class='query_check' v-if='queryBtnShow'>-->
<!-- <button @click='queryCheck(uuid)'>校验查询</button>-->
<!-- <!– <input type="button" v-on="queryCheck(uuid)" value="校"/> –>-->
<!-- <!– <div v-if="queryCheckStatus">文件正在上传中</div> –>-->
<!-- <span class='queryCheckShow' v-if='queryCheckShow'>{{ checkStatus }}</span>-->
<!-- </div>-->
<!-- <div class='save-result' v-if='saveBtnShow'>-->
<!-- <button @click='download_check_result(file_path)'>校验保存</button>-->
<!-- </div>-->
</li>
<div class='no-file' v-if='!props.fileList.length'>
Empty
</div>
</ul>
</div>
</uploader-list>
</uploader>
</div>
</template>
<script>
import SparkMD5 from 'spark-md5'
import { ACCEPT_FILE_CONFIG } from '@/config/defaultSettings'
import { checkResult, isFileExist, mergeFile, textCheck } from '@/api/uploadTool'
// import storage from 'store'
// https://github.com/simple-uploader/Uploader#events
export default {
data() {
return {
options: {
target: '/api/upload/upload/', // 目标上传URL
testChunks: true,
chunkSize: '2048000',
// chunkSize: "10240000", // 分块时按该值来分
fileParameterName: 'file', // 上传文件时文件的参数名
maxChunkRetries: 3, // 最大自动失败重试上传次数
// 由于我自身业务原因, 添加了校验查询功能, 查询的时候不能控制
// 对应上传文件的id, 因此,去掉了多文件上传
// 这里注释掉, 就可以实现多文件上传了
// singleFile: true, // 单文件上传
// 上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求
checkChunkUploadedByResponse: function(chunk, message) {
console.log('上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求')
console.log(chunk)
console.log(message)
let objMessage = JSON.parse(message)
console.log('objMessage:', objMessage)
//---------秒传说明------------
// 此处解开注释, 配合后端传来的参数可以实现秒传, 我因为上传后还需要进行校验请求,
// 这里我就砍掉秒传功能了..
//-----------------------------
// 此处根据返回值来判断是否为秒传
// if (objMessage.skipUpload === "true") {
// return true;
// }
// 根据返回的数组内容来判断哪些分片不需要重新上传
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
return parsedTimeRemaining
.replace(/\syears?/, 'years')
.replace(/\days?/, 'days')
.replace(/\shours?/, 'hours')
.replace(/\sminutes?/, 'minutes')
.replace(/\sseconds?/, 'seconds')
}
},
attrs: {
accept: ACCEPT_FILE_CONFIG.getAll()
},
statusText: {
success: 'success',
error: 'network error',
uploading: 'uploading',
typeError: 'typeError',
emptyError: 'emptyError',
paused: 'paused',
waiting: 'waiting',
cmd5: 'calculate md5',
merging: 'merging'
},
fileStatusText: (status, response) => {
return this.statusText[status]
},
saveBtnShow: false,
queryBtnShow: true,
queryCheckShow: false,
// queryCheckStatus: false,
checkStatus: 'checking...',
uuid: '',
file_path: ''
}
},
mounted() {
// this.$bus.$on('openUploader', query => {
// this.params = query || {}
// if (this.$refs.uploadBtn) {
// document.querySelector('#global-uploader-btn').click()
// }
// })
},
computed: {
//Uploader实例
uploader() {
return this.$refs.uploader.uploader
}
},
methods: {
onFileAdded(file, event) {
console.log(file)
console.log(event)
console.log(this.uploader.fileList)
console.log(this.uploader.files)
this.$emit('canGoToNextStep', false)
this.$emit('canGoToPreStep', false)
// console.log(this.uploader.files.length)
//暂停文件上传
file.pause()
//
// this.panelShow = true;
this.queryCheckShow = false
this.saveBtnShow = false
this.queryBtnShow = false
this.statusSet(file.id, 'md5')
this.computedMD5(file)
// setTimeout(() => {
// this.computedMD5(file)
// }, 5000)
// Bus.$emit("fileAdded");
// console.log(this.uploader.files)
// console.log(this.uploader.files.length)
},
onFileProgress(rootFile, file, chunk) {
console.log(
`uploading ${file.name}，chunk：${chunk.startByte /
1024 /
1024} ~ ${chunk.endByte / 1024 / 1024}`
)
},
async onFileSuccess(rootFile, file, response, chunk) {
console.log('onFileSuccess')
console.log(file)
let res = JSON.parse(response)
file.success = true
// 文件完成上传, 文件合并的标志
if (res.needMerge === 'true') {
this.statusSet(file.id, 'merging')
let formData = new FormData()
formData.append('filename', file.name)
formData.append('identifier', arguments[0].uniqueIdentifier)
formData.append('totalSize', file.size)
formData.append('timeStamp', res.timeStamp)
console.log('formData')
try {
// --------------------发送合并请求 start ---------------------
let res = await mergeFile(formData)
// 合并失败的处理
// if (res.code !== 200) {
// this.$notification.error({
// message: 'Error',
// description: 'An error occurred during the inspection, please try again'
// })
// file.cancel()
// return
// }
// 文件上传成功 ui更新
this.statusRemove(file.id)
this.statusSet(file.id, 'success')
// this.queryBtnShow = true
// this.$bus.$emit('fileSuccess')
// --------------------发送合并请求 end ---------------------
// ---------------------发送请求 询问是否校验成功 start---------------
// let formData2 = new FormData()
// formData2.append('fpath', res.filePath)
// formData2.append('fname', res.fileName)
// let res2 = await textCheck(formData2)
// if (res2.code !== 200) {
// this.$notification.error({
// message: 'Error',
// description: 'An error occurred during the inspection, please try again'
// })
// file.cancel()
// }
// this.uuid = res2.uuid
// this.file_path = res2.file_path
// ---------------------发送请求 询问是否校验成功 end---------------
// this.statusRemove(file.id)
// this.statusSet(file.id, 'finish checking')
// 收集文件相关数据
console.log(file)
this.$store.commit('ADD_FILE_LIST', file)
// 提示可以到下一步了
this.$notification.success({
message: 'Success',
description: 'Successfully upload, go to next step to finish.'
})
this.$emit('canGoToNextStep', true)
this.$emit('canGoToPreStep', true)
// file.uniqueIdentifier
// this.statusSet(file.id, "checking");
//
// // -------------------定时发送请求,看检验是否完成 start-------------------
// // 定时发送请求,看检验是否完成
// let interval = setInterval(() => {
// setTimeout(async () => {
// let formData3 = new FormData()
// formData3.append('file_uuid', res2.uuid)
//
// let res3 = await checkResult(formData3)
// console.log('校验中,请稍等...')
// if (res3.code == 200) {
// console.log('校验完成')
// clearInterval(interval)
// // this.statusRemove(file.id);
// // this.statusSet(file.id, "checkSuccess");
// this.checkStatus = 'finish checking'
// this.saveBtnShow = true
// }
// }, 0)
// }, 1000)
//
// // -------------------定时发送请求,看检验是否完成 end-------------------
} catch (e) {
this.$notification.error({
message: 'Error',
description: 'An error occurred during the inspection, please try again'
})
file.cancel()
}
}
},
onFileError(rootFile, file, response, chunk) {
this.$notification.error({
message: 'Error',
description: 'Please try again'
})
},
onfileRemoved(file) {
this.$message.info(`${file.name} 's upload had been canceled`)
},
/**
* 计算上传文件的md5, 实现断点续传和秒传
*/
computedMD5(file) {
let fileReader = new FileReader()
let time = new Date().getTime()
let blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice
let currentChunk = 0
const chunkSize = 10 * 1024 * 1000
let chunks = Math.ceil(file.size / chunkSize)
let spark = new SparkMD5.ArrayBuffer()
// this.statusSet(file.id, 'md5')
// $('.uploader-file-action').css('display', 'none');
loadNext()
fileReader.onload = e => {
spark.append(e.target.result)
currentChunk++
if (currentChunk < chunks) {
// console.log(
// `第${currentChunk}分片解析完成, 开始第${currentChunk +
// 1} / ${chunks}分片解析`
// )
loadNext()
// 实时展示MD5的计算进度
setTimeout(() => {
document.querySelector(`.myStatus_${file.id}`).textContent = 'verify MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
// console.log(file.id)
// console.log('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
// console.log(document.querySelector(`.myStatus_${file.id}`))
// document.querySelector(`.myStatus_${file.id}`).textContent = '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
}, 20)
} else {
let md5 = spark.end()
this.computeMD5Success(md5, file)
spark.destroy() // 释放缓存
console.log(
`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
file.size
} 用时：${new Date().getTime() - time} ms`
)
}
}
fileReader.onerror = function() {
this.error(`文件${file.name}读取出错，请检查该文件`)
file.cancel()
}
function loadNext() {
let start = currentChunk * chunkSize
let end =
start + chunkSize >= file.size ? file.size : start + chunkSize
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
}
},
// 计算md5成功
async computeMD5Success(md5, file) {
file.uniqueIdentifier = md5 // 将文件md5赋值给文件唯一标识
this.statusRemove(file.id)
// file.resume()
console.log('computeMD5Success')
console.log(file)
// 把md5校验结果传到后端 检查是否存在这个文件
let that = this
try {
let res = await isFileExist({
md5,
fileName: file.name
})
if (res.status) {
// 文件未在s3存在的情况
if (res['is_exist'] === false) {
this.$confirm({
title: 'Are you sure to upload it?',
content: h => res.message,
okText: 'yes',
onOk() {
// 开始文件上传的一个动作
// 将表单里的是否强制上传设置为false
file['is_force_process'] = false
file.resume()
},
onCancel() {
that.$emit('canGoToPreStep', true)
file.cancel()
}
})
} else {
// 是否需要强制上传
this.$confirm({
title: 'The file had existed, are you sure to recover it?',
content: h => res.message,
okText: 'yes',
onOk() {
// 开始文件上传的一个动作
// 将表单里的是否强制上传设置为false
file['is_force_process'] = true
file.resume()
},
onCancel() {
that.$emit('canGoToPreStep', true)
file.cancel()
}
})
}
} else {
file.cancel()
}
} catch (e) {
file.cancel()
}
},
// 展示文件列表
// fileListShow() {
// // let $list = $('#global-uploader .file-list')
// let $list = this.$refs.fileList
//
// if ($list.is(':visible')) {
// $list.slideUp()
// } else {
// $list.slideDown()
// }
// },
close() {
this.uploader.cancel()
},
/**
* 新增的自定义的状态: 'md5'、'transcoding'、'failed'
* @param id
* @param status
*/
statusSet(id, status) {
let statusMap = {
md5: {
text: 'verify MD5',
bgc: '#fff'
},
merging: {
text: 'merging',
bgc: '#e2eeff'
},
transcoding: {
text: 'transcoding',
bgc: '#e2eeff'
},
failed: {
text: 'fail to upload',
bgc: '#e2eeff'
},
success: {
text: 'successfully upload',
bgc: '#e2eeff'
},
checking: {
text: 'checking',
bgc: '#e2eeff'
},
checkSuccess: {
text: 'check ok',
bgc: '#e2eeff'
}
}
setTimeout(() => {
let p = document.createElement('p')
p.className = `myStatus_${id}`
let father = document.querySelector(`.file_${id} .uploader-file-status`)
p.setAttribute('style', `position: absolute; top:-16px;left: 0;right: 0; bottom: 0;zIndex: 1; backgroundColor: ${statusMap[status].bgc}`)
p.append(statusMap[status].text)
father.appendChild(p)
})
},
statusRemove(id) {
// console.log("statusRemove")
// console.log(id)
this.$nextTick(() => {
let node = document.querySelector(`.myStatus_${id}`)
node.parentNode.removeChild(node)
})
},
error(msg) {
this.$notification.error({
message: 'Error',
description: msg
})
},
// 查询每个区块
queryCheck: function(uuid) {
console.log('uuid::', uuid)
console.log('file_path::--------', this.file_path)
// if (uuid === "") {
// this.queryCheckStatus = true;
// return;
// }
let formData = new FormData()
formData.append('file_uuid', uuid)
const instance = this.$http.post({
headers: {
'Content-Type': 'multipart/form-data'
}
})
instance
.post('http://127.0.0.1:8000/fileUpload/check_result', formData)
.then(res => {
// console.log("点击了查询校验状态按钮");
if (res.data.code == '200') {
// this.queryCheckStatus = false;
this.checkStatus = 'check ok'
this.queryCheckShow = true
} else {
this.checkStatus = 'checking...'
this.queryCheckShow = true
}
})
},
// 下载校验结果
download_check_result() {
let formData = new FormData()
formData.append('file_path', this.file_path)
const instance = this.$axios.create({
headers: {
'Content-Type': 'multipart/form-data'
},
responseType: 'blob'
})
instance
.post('http://127.0.0.1:8000/fileUpload/file_download', formData)
.then(response => {
if (!response) {
return
}
let url = window.URL.createObjectURL(new Blob([response.data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'check-result.txt')
document.body.appendChild(link)
link.click()
})
}
},
watch: {},
destroyed() {
// this.$bus.$off('openUploader')
}
}
</script>
<style scoped lang='less'>
#global-uploader {
// position: fixed;
z-index: 20;
max-width: 1000px;
margin: 10px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 4);
//padding: 10px;
h2 {
padding: 30px 0;
text-align: center;
font-size: 20px;
}
.uploader-app {
//width: 880px;
//padding: 15px;
//margin: 20px auto 0;
font-size: 14px;
}
ul li {
list-style-type: none;
}
li div {
//left: -19px;
}
}
.file-panel {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 7px 7px 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.file-title {
display: flex;
height: 40px;
// line-height: 40px;
padding: 0 15px;
border-bottom: 1px solid #ddd;
.operate {
flex: 1;
text-align: right;
}
}
.file-list {
position: relative;
height: 240px;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
//border: 1px solid black;
padding: 0;
> li {
background-color: #fff;
}
}
&.collapse {
.file-title {
background-color: #e7ecf2;
}
}
}
.no-file {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
}
.uploader-btn {
margin-right: 4px;
color: #fff;
padding: 6px 16px;
}
#global-uploader-btn {
//border: 1px solid #409eff;
//background: #409eff;
border: 0;
width: 100%;
//height: 100px;
padding: 15px;
color: #F5222D;
display: flex;
flex-direction: column;
align-items: center;
p {
padding: 0;
margin: 10px;
}
.hzs-upload-icon {
font-size: 40px;
}
.hzs-upload-title {
font-size: 20px;
}
.hzs-upload-description {
font-size: 16px;
color: rgba(0, 0, 0, 0.45)
}
}
#global-uploader-btn:hover {
background: none;
}
#global-uploader-drop {
//height: 150px;
padding: 0;
}
#global-uploader-drop:hover {
border: 1px dashed #F5222D;
}
#global-uploader-dir-btn {
border: 1px solid #67c23a;
background: #67c23a;
}
.save-result {
position: absolute;
margin-top: -24px;
margin-left: 700px;
z-index: 10;
}
.query_check {
position: absolute;
margin-left: 700px;
margin-top: -50px;
z-index: 10;
}
.queryCheckShow {
margin-left: 10px;
color: red;
font-size: 12px;
}
</style>调用
<MyUploaderBox
@canGoToNextStep='canGoToNextStep'
@canGoToPreStep='canGoToPreStep'
></MyUploaderBox>
参考
vue实现分片上传 https://blog.csdn.net/AIfurture/article/details/103975897
字节跳动面试官：请你实现一个大文件上传和断点续传 https://juejin.cn/post/6844904046436843527
vue-simple-uploader组件的使用感受 https://www.jianshu.com/p/da8ad489095e
大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://blog.csdn.net/qq_36852780/article/details/107437875
相关代码和文档：
https://github.com/ClearlightY/FileUpload
https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader
https://github.com/simple-uploader/Uploader
到此这篇关于vue2中基于vue-simple-upload的文件分片上传组件的文章就介绍到这了,更多相关vue-simple-upload文件分片上传内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
