Browse Source

修复断点续传前端部分

main
piexlmax 3 years ago
parent
commit
2863f18eba
  1. 9
      web/src/api/breakpoint.js
  2. 32
      web/src/view/example/breakpoint/breakpoint.vue

9
web/src/api/breakpoint.js

@ -16,6 +16,15 @@ export const findFile = (params) => {
}) })
} }
export const breakpointContinue = (data) => {
return service({
url: '/fileUploadAndDownload/breakpointContinue',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
data
})
}
export const breakpointContinueFinish = (params) => { export const breakpointContinueFinish = (params) => {
return service({ return service({
url: '/fileUploadAndDownload/breakpointContinueFinish', url: '/fileUploadAndDownload/breakpointContinueFinish',

32
web/src/view/example/breakpoint/breakpoint.vue

@ -34,16 +34,17 @@ import axios from 'axios'
import { import {
findFile, findFile,
breakpointContinueFinish, breakpointContinueFinish,
removeChunk
removeChunk,
breakpointContinue
} from '@/api/breakpoint' } from '@/api/breakpoint'
import { ref } from 'vue'
import { computed, ref, watch } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const file = ref(null) const file = ref(null)
const fileMd5 = ref('') const fileMd5 = ref('')
const formDataList = ref([]) const formDataList = ref([])
const waitUpLoad = ref([]) const waitUpLoad = ref([])
const waitNum = ref(0)
const waitNum = ref(NaN)
const limitFileSize = ref(false) const limitFileSize = ref(false)
const percentage = ref(0) const percentage = ref(0)
const percentageFlage = ref(true) const percentageFlage = ref(true)
@ -100,8 +101,10 @@ const choseFile = async(e) => {
}) })
} else { } else {
waitUpLoad.value = [] // waitUpLoad.value = [] //
ElMessage.success("文件已秒传")
} }
waitNum.value = waitUpLoad.value.length // waitNum.value = waitUpLoad.value.length //
console.log(waitNum.value)
} }
} else { } else {
limitFileSize.value = true limitFileSize.value = true
@ -115,7 +118,6 @@ const getFile = () => {
ElMessage('请先上传文件') ElMessage('请先上传文件')
return return
} }
percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100)
if (percentage.value === 100) { if (percentage.value === 100) {
percentageFlage.value = false percentageFlage.value = false
} }
@ -139,9 +141,14 @@ const sliceFile = () => {
}) })
} }
watch(waitNum,()=>{percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100)})
const upLoadFileSlice = async(item) => { const upLoadFileSlice = async(item) => {
// //
await axios.post(import.meta.env.VITE_BASE_API + '/fileUploadAndDownload/breakpointContinue', item.formData)
const fileRe = await breakpointContinue(item.formData)
if (fileRe.code !== 0) {
return
}
waitNum.value-- // waitNum.value-- //
if (waitNum.value === 0) { if (waitNum.value === 0) {
// //
@ -150,13 +157,12 @@ const upLoadFileSlice = async(item) => {
fileMd5: fileMd5.value fileMd5: fileMd5.value
} }
const res = await breakpointContinueFinish(params) const res = await breakpointContinueFinish(params)
if (res.success) {
if (res.code === 0) {
// //
const params = { const params = {
fileName: file.value.name,
fileMd5: fileMd5.value, fileMd5: fileMd5.value,
filePath: res.data.filePath
} }
ElMessage.success(上传成功)
await removeChunk(params) await removeChunk(params)
} }
} }
@ -171,15 +177,7 @@ const inputChange = () => {
<script> <script>
export default { export default {
name: 'BreakPoint',
data() {
return {
}
},
methods: {
}
name: 'BreakPoint'
} }
</script> </script>

Loading…
Cancel
Save