|
|
|
@ -5,7 +5,7 @@ |
|
|
|
<form id="fromCont" method="post"> |
|
|
|
<div class="fileUpload" @click="inputChange"> |
|
|
|
选择文件 |
|
|
|
<input v-show="false" id="file" ref="Input" multiple="multiple" type="file" @change="choseFile"> |
|
|
|
<input v-show="false" id="file" ref="FileInput" multiple="multiple" type="file" @change="choseFile"> |
|
|
|
</div> |
|
|
|
</form> |
|
|
|
<el-button :disabled="limitFileSize" type="primary" size="mini" class="uploadBtn" @click="getFile">上传文件</el-button> |
|
|
|
@ -28,7 +28,7 @@ |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
<script setup> |
|
|
|
import SparkMD5 from 'spark-md5' |
|
|
|
import axios from 'axios' |
|
|
|
import { |
|
|
|
@ -36,137 +36,151 @@ import { |
|
|
|
breakpointContinueFinish, |
|
|
|
removeChunk |
|
|
|
} from '@/api/breakpoint' |
|
|
|
export default { |
|
|
|
name: 'BreakPoint', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
file: null, |
|
|
|
fileMd5: '', |
|
|
|
formDataList: [], |
|
|
|
waitUpLoad: [], |
|
|
|
waitNum: 0, |
|
|
|
limitFileSize: false, |
|
|
|
percentage: 0, |
|
|
|
percentageFlage: true, |
|
|
|
customColor: '#409eff' |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 选中文件的函数 |
|
|
|
async choseFile(e) { |
|
|
|
const fileR = new FileReader() // 创建一个reader用来读取文件流 |
|
|
|
const file = e.target.files[0] // 获取当前文件 |
|
|
|
const maxSize = 5 * 1024 * 1024 |
|
|
|
this.file = file // file 丢全局方便后面用 可以改进为func传参形式 |
|
|
|
this.percentage = 0 |
|
|
|
if (file.size < maxSize) { |
|
|
|
fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致 |
|
|
|
fileR.onload = async e => { |
|
|
|
// 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中 |
|
|
|
const blob = e.target.result |
|
|
|
const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我） |
|
|
|
spark.append(blob) // 文件流丢进工具 |
|
|
|
this.fileMd5 = spark.end() // 工具结束 产生一个a 总文件的md5 |
|
|
|
const FileSliceCap = 1 * 1024 * 1024 // 分片字节数 |
|
|
|
let start = 0 // 定义分片开始切的地方 |
|
|
|
let end = 0 // 每片结束切的地方a |
|
|
|
let i = 0 // 第几片 |
|
|
|
this.formDataList = [] // 分片存储的一个池子 丢全局 |
|
|
|
while (end < file.size) { |
|
|
|
// 当结尾数字大于文件总size的时候 结束切片 |
|
|
|
start = i * FileSliceCap // 计算每片开始位置 |
|
|
|
end = (i + 1) * FileSliceCap // 计算每片结束位置 |
|
|
|
var fileSlice = this.file.slice(start, end) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数 |
|
|
|
const formData = new window.FormData() // 创建FormData用于存储传给后端的信息 |
|
|
|
formData.append('fileMd5', this.fileMd5) // 存储总文件的Md5 让后端知道自己是谁的切片 |
|
|
|
formData.append('file', fileSlice) // 当前的切片 |
|
|
|
formData.append('chunkNumber', i) // 当前是第几片 |
|
|
|
formData.append('fileName', this.file.name) // 当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法 |
|
|
|
this.formDataList.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子 |
|
|
|
i++ |
|
|
|
} |
|
|
|
const params = { |
|
|
|
fileName: this.file.name, |
|
|
|
fileMd5: this.fileMd5, |
|
|
|
chunkTotal: this.formDataList.length |
|
|
|
} |
|
|
|
const res = await findFile(params) |
|
|
|
// 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片 |
|
|
|
const finishList = res.data.file.ExaFileChunk // 上传成功的切片 |
|
|
|
const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能） |
|
|
|
if (!IsFinish) { |
|
|
|
// 当是断点续传时候 |
|
|
|
this.waitUpLoad = this.formDataList.filter(all => { |
|
|
|
return !( |
|
|
|
finishList && |
|
|
|
finishList.some(fi => fi.FileChunkNumber === all.key) |
|
|
|
) // 找出需要上传的切片 |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.waitUpLoad = [] // 秒传则没有需要上传的切片 |
|
|
|
} |
|
|
|
this.waitNum = this.waitUpLoad.length // 记录长度用于百分比展示 |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.limitFileSize = true |
|
|
|
this.$message('请上传小于5M文件') |
|
|
|
import { ref } from 'vue' |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
|
|
|
|
const file = ref(null) |
|
|
|
const fileMd5 = ref('') |
|
|
|
const formDataList = ref([]) |
|
|
|
const waitUpLoad = ref([]) |
|
|
|
const waitNum = ref(0) |
|
|
|
const limitFileSize = ref(false) |
|
|
|
const percentage = ref(0) |
|
|
|
const percentageFlage = ref(true) |
|
|
|
|
|
|
|
// 选中文件的函数 |
|
|
|
const choseFile = async(e) => { |
|
|
|
const fileR = new FileReader() // 创建一个reader用来读取文件流 |
|
|
|
const fileInput = e.target.files[0] // 获取当前文件 |
|
|
|
const maxSize = 5 * 1024 * 1024 |
|
|
|
file.value = fileInput // file 丢全局方便后面用 可以改进为func传参形式 |
|
|
|
percentage.value = 0 |
|
|
|
if (file.value.size < maxSize) { |
|
|
|
fileR.readAsArrayBuffer(file.value) // 把文件读成ArrayBuffer 主要为了保持跟后端的流一致 |
|
|
|
fileR.onload = async e => { |
|
|
|
// 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中 |
|
|
|
const blob = e.target.result |
|
|
|
const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具 （md5用于检测文件一致性 这里不懂就打电话问我） |
|
|
|
spark.append(blob) // 文件流丢进工具 |
|
|
|
fileMd5.value = spark.end() // 工具结束 产生一个a 总文件的md5 |
|
|
|
const FileSliceCap = 1 * 1024 * 1024 // 分片字节数 |
|
|
|
let start = 0 // 定义分片开始切的地方 |
|
|
|
let end = 0 // 每片结束切的地方a |
|
|
|
let i = 0 // 第几片 |
|
|
|
formDataList.value = [] // 分片存储的一个池子 丢全局 |
|
|
|
while (end < file.value.size) { |
|
|
|
// 当结尾数字大于文件总size的时候 结束切片 |
|
|
|
start = i * FileSliceCap // 计算每片开始位置 |
|
|
|
end = (i + 1) * FileSliceCap // 计算每片结束位置 |
|
|
|
var fileSlice = file.value.slice(start, end) // 开始切 file.slice 为 h5方法 对文件切片 参数为 起止字节数 |
|
|
|
const formData = new window.FormData() // 创建FormData用于存储传给后端的信息 |
|
|
|
formData.append('fileMd5', fileMd5.value) // 存储总文件的Md5 让后端知道自己是谁的切片 |
|
|
|
formData.append('file', fileSlice) // 当前的切片 |
|
|
|
formData.append('chunkNumber', i) // 当前是第几片 |
|
|
|
formData.append('fileName', file.value.name) // 当前文件的文件名 用于后端文件切片的命名 formData.appen 为 formData对象添加参数的方法 |
|
|
|
formDataList.value.push({ key: i, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子 |
|
|
|
i++ |
|
|
|
} |
|
|
|
}, |
|
|
|
getFile() { |
|
|
|
// 确定按钮 |
|
|
|
if (this.file === null) { |
|
|
|
this.$message('请先上传文件') |
|
|
|
return |
|
|
|
const params = { |
|
|
|
fileName: file.value.name, |
|
|
|
fileMd5: fileMd5.value, |
|
|
|
chunkTotal: formDataList.value.length |
|
|
|
} |
|
|
|
this.percentage = Math.floor(((this.formDataList.length - this.waitNum) / this.formDataList.length) * 100) |
|
|
|
if (this.percentage === 100) { |
|
|
|
this.percentageFlage = false |
|
|
|
const res = await findFile(params) |
|
|
|
// 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片 |
|
|
|
const finishList = res.data.file.ExaFileChunk // 上传成功的切片 |
|
|
|
const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能） |
|
|
|
if (!IsFinish) { |
|
|
|
// 当是断点续传时候 |
|
|
|
waitUpLoad.value = formDataList.value.filter(all => { |
|
|
|
return !( |
|
|
|
finishList && |
|
|
|
finishList.some(fi => fi.FileChunkNumber === all.key) |
|
|
|
) // 找出需要上传的切片 |
|
|
|
}) |
|
|
|
} else { |
|
|
|
waitUpLoad.value = [] // 秒传则没有需要上传的切片 |
|
|
|
} |
|
|
|
this.sliceFile() // 上传切片 |
|
|
|
}, |
|
|
|
sliceFile() { |
|
|
|
this.waitUpLoad && |
|
|
|
this.waitUpLoad.forEach(item => { |
|
|
|
waitNum.value = waitUpLoad.value.length // 记录长度用于百分比展示 |
|
|
|
} |
|
|
|
} else { |
|
|
|
limitFileSize.value = true |
|
|
|
ElMessage('请上传小于5M文件') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const getFile = () => { |
|
|
|
// 确定按钮 |
|
|
|
if (file.value === null) { |
|
|
|
ElMessage('请先上传文件') |
|
|
|
return |
|
|
|
} |
|
|
|
percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100) |
|
|
|
if (percentage.value === 100) { |
|
|
|
percentageFlage.value = false |
|
|
|
} |
|
|
|
sliceFile() // 上传切片 |
|
|
|
} |
|
|
|
|
|
|
|
const sliceFile = () => { |
|
|
|
waitUpLoad.value && |
|
|
|
waitUpLoad.value.forEach(item => { |
|
|
|
// 需要上传的切片 |
|
|
|
item.formData.append('chunkTotal', this.formDataList.length) // 切片总数携带给后台 总有用的 |
|
|
|
item.formData.append('chunkTotal', formDataList.value.length) // 切片总数携带给后台 总有用的 |
|
|
|
const fileR = new FileReader() // 功能同上 |
|
|
|
const file = item.formData.get('file') |
|
|
|
fileR.readAsArrayBuffer(file) |
|
|
|
const fileF = item.formData.get('file') |
|
|
|
fileR.readAsArrayBuffer(fileF) |
|
|
|
fileR.onload = e => { |
|
|
|
const spark = new SparkMD5.ArrayBuffer() |
|
|
|
spark.append(e.target.result) |
|
|
|
item.formData.append('chunkMd5', spark.end()) // 获取当前切片md5 后端用于验证切片完整性 |
|
|
|
this.upLoadFileSlice(item) |
|
|
|
upLoadFileSlice(item) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
async upLoadFileSlice(item) { |
|
|
|
// 切片上传 |
|
|
|
await axios.post(import.meta.env.VITE_BASE_API + '/fileUploadAndDownload/breakpointContinue', item.formData) |
|
|
|
this.waitNum-- // 百分数增加 |
|
|
|
if (this.waitNum === 0) { |
|
|
|
// 切片传完以后 合成文件 |
|
|
|
const params = { |
|
|
|
fileName: this.file.name, |
|
|
|
fileMd5: this.fileMd5 |
|
|
|
} |
|
|
|
const res = await breakpointContinueFinish(params) |
|
|
|
if (res.success) { |
|
|
|
// 合成文件过后 删除缓存切片 |
|
|
|
const params = { |
|
|
|
fileName: this.file.name, |
|
|
|
fileMd5: this.fileMd5, |
|
|
|
filePath: res.data.filePath |
|
|
|
} |
|
|
|
await removeChunk(params) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const upLoadFileSlice = async(item) => { |
|
|
|
// 切片上传 |
|
|
|
await axios.post(import.meta.env.VITE_BASE_API + '/fileUploadAndDownload/breakpointContinue', item.formData) |
|
|
|
waitNum.value-- // 百分数增加 |
|
|
|
if (waitNum.value === 0) { |
|
|
|
// 切片传完以后 合成文件 |
|
|
|
const params = { |
|
|
|
fileName: file.value.name, |
|
|
|
fileMd5: fileMd5.value |
|
|
|
} |
|
|
|
const res = await breakpointContinueFinish(params) |
|
|
|
if (res.success) { |
|
|
|
// 合成文件过后 删除缓存切片 |
|
|
|
const params = { |
|
|
|
fileName: file.value.name, |
|
|
|
fileMd5: fileMd5.value, |
|
|
|
filePath: res.data.filePath |
|
|
|
} |
|
|
|
}, |
|
|
|
inputChange() { |
|
|
|
this.$refs.Input.dispatchEvent(new MouseEvent('click')) |
|
|
|
await removeChunk(params) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const FileInput = ref(null) |
|
|
|
const inputChange = () => { |
|
|
|
FileInput.value.dispatchEvent(new MouseEvent('click')) |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'BreakPoint', |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
piexlmax
3 years ago