|
|
|
@@ -48,23 +48,17 @@ |
|
|
|
<div v-for="(item, index) in uploadFiles" :key="item.upload.uuid" class="datast-upload-progress"> |
|
|
|
<span class="dataset-name nowrap" :title="item.name">{{ item.name }}</span> |
|
|
|
<div class="dataset-progress"> |
|
|
|
<el-progress :text-inside="true" :stroke-width="14" :percentage="uploadProgressList[index].progress"> |
|
|
|
<el-progress :text-inside="true" :stroke-width="14" :percentage="uploadStatusList[index].progress"> |
|
|
|
</el-progress> |
|
|
|
</div> |
|
|
|
<div class="dataset-status nowrap"> |
|
|
|
<div class="status-flex"> |
|
|
|
<i v-if=" |
|
|
|
uploadProgressList[index].infoCode === 1 || |
|
|
|
uploadProgressList[index].infoCode === 2 |
|
|
|
" class="ri-close-circle-line failed"></i> |
|
|
|
<i v-if="uploadProgressList[index].infoCode === 0" class="ri-checkbox-circle-line success"> |
|
|
|
</i> |
|
|
|
<span>{{ uploadProgressList[index].status }}</span> |
|
|
|
<el-tooltip v-if="uploadProgressList[index].infoCode === 1" class="item" effect="dark" |
|
|
|
placement="top"> |
|
|
|
<div slot="content"> |
|
|
|
{{ uploadProgressList[index].failedInfo }} |
|
|
|
</div> |
|
|
|
<i v-if="uploadStatusList[index].infoCode === 1 || uploadStatusList[index].infoCode === 2" |
|
|
|
class="ri-close-circle-line failed"></i> |
|
|
|
<i v-if="uploadStatusList[index].infoCode === 0" class="ri-checkbox-circle-line success"></i> |
|
|
|
<span>{{ uploadStatusList[index].status }}</span> |
|
|
|
<el-tooltip v-if="uploadStatusList[index].infoCode === 1" class="item" effect="dark" placement="top"> |
|
|
|
<div slot="content"> {{ uploadStatusList[index].failedInfo }} </div> |
|
|
|
<i style="font-size: 16px; margin-left: 0.5rem; cursor: pointer" class="ri-question-fill"></i> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
@@ -79,12 +73,12 @@ |
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
|
|
import { getModelInfoByName } from '~/apis/modules/modelmanage'; |
|
|
|
import { getChunks, getNewMultipart, getMultipartUrl, setCompleteMultipart } from '~/apis/modules/fileupload'; |
|
|
|
import { getUrlSearchParams } from '~/utils'; |
|
|
|
import 'dropzone/dist/dropzone.css'; |
|
|
|
import Dropzone from 'dropzone'; |
|
|
|
import SparkMD5 from "spark-md5"; |
|
|
|
import { getModelInfoByName } from '~/apis/modules/modelmanage'; |
|
|
|
import { getChunks, getNewMultipart, getMultipartUrl, setCompleteMultipart } from '~/apis/modules/fileupload'; |
|
|
|
import { getUrlSearchParams } from '~/utils'; |
|
|
|
|
|
|
|
Dropzone.autoDiscover = false; |
|
|
|
|
|
|
|
@@ -115,7 +109,8 @@ export default { |
|
|
|
|
|
|
|
uploadFiles: [], |
|
|
|
uploadLength: 0, |
|
|
|
uploadProgressList: [], |
|
|
|
uploadSuccessLength: 0, |
|
|
|
uploadStatusList: [], |
|
|
|
|
|
|
|
uploading: false, |
|
|
|
}; |
|
|
|
@@ -133,14 +128,14 @@ export default { |
|
|
|
addRemoveLinks: true, |
|
|
|
autoProcessQueue: false, |
|
|
|
dictDefaultMessage: '点击添加文件或直接拖拽文件到此处', |
|
|
|
dictFileTooBig: 'dictFileTooBig', |
|
|
|
dictFileTooBig: '文件太大', |
|
|
|
dictRemoveFile: '移除文件', |
|
|
|
dictMaxFilesExceeded: this.defaultErrTxt, |
|
|
|
}); |
|
|
|
this.dropzoneHandler.on("addedfile", file => { |
|
|
|
this.checkFiles(file); |
|
|
|
}); |
|
|
|
this.dropzoneHandler.on("removedfile", file => { |
|
|
|
this.dropzoneHandler.on("removedfile", file => { |
|
|
|
this.checkFiles(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
@@ -168,15 +163,16 @@ export default { |
|
|
|
resetFileStatus() { |
|
|
|
this.uploadFiles = []; |
|
|
|
this.uploadLength = 0; |
|
|
|
this.uploadProgressList = []; |
|
|
|
this.uploadSuccessLength = 0; |
|
|
|
this.uploadStatusList = []; |
|
|
|
}, |
|
|
|
updateProgress(file, status, progress, infoCode, failedInfo = "") { // updateFileStatus |
|
|
|
this.uploadProgressList.forEach((item, index) => { |
|
|
|
updateFileStatus(file, status, progress, infoCode, failedInfo = "") { |
|
|
|
this.uploadStatusList.forEach((item, index) => { |
|
|
|
if (item.uploadUuid === file.upload.uuid) { |
|
|
|
this.uploadProgressList[index].status = status; |
|
|
|
this.uploadProgressList[index].progress = progress; |
|
|
|
this.uploadProgressList[index].infoCode = infoCode; |
|
|
|
this.uploadProgressList[index].failedInfo = failedInfo; |
|
|
|
this.uploadStatusList[index].status = status; |
|
|
|
this.uploadStatusList[index].progress = progress; |
|
|
|
this.uploadStatusList[index].infoCode = infoCode; |
|
|
|
this.uploadStatusList[index].failedInfo = failedInfo; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
@@ -191,7 +187,7 @@ export default { |
|
|
|
file.totalChunkCounts = 1; |
|
|
|
} |
|
|
|
let currentChunk = 0; |
|
|
|
this.uploadProgressList.push({ |
|
|
|
this.uploadStatusList.push({ |
|
|
|
uploadUuid: file.upload.uuid, |
|
|
|
name: file.name, |
|
|
|
status: '计算文件MD5...', |
|
|
|
@@ -265,13 +261,13 @@ export default { |
|
|
|
this.breakpointUpload(file); |
|
|
|
} else { |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateProgress(file, "上传失败", 0, 2); |
|
|
|
this.updateFileStatus(file, "上传失败", 0, 2); |
|
|
|
} |
|
|
|
return file; |
|
|
|
}).catch(err => { |
|
|
|
console.log('getNewMultipart', err); |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateProgress(file, "上传失败", 0, 2); |
|
|
|
this.updateFileStatus(file, "上传失败", 0, 2); |
|
|
|
return err; |
|
|
|
}); |
|
|
|
}, |
|
|
|
@@ -373,22 +369,23 @@ export default { |
|
|
|
fileReader.abort(); |
|
|
|
currentChunk++; |
|
|
|
if (currentChunk < chunks) { |
|
|
|
console.log(`第${currentChunk}个分片上传完成, 开始第${currentChunk + 1}/${chunks}个分片上传`); |
|
|
|
this.updateProgress(file, '上传中...', Number(((currentChunk / chunks) * 100).toFixed(2)), 3); |
|
|
|
console.log(`第${currentChunk}个分片上传完成, 开始第${currentChunk + 1}/${chunks}个分片上传`); |
|
|
|
this.updateFileStatus(file, '上传中...', Number(((currentChunk / chunks) * 100).toFixed(2)), 3); |
|
|
|
loadNext(); |
|
|
|
} else { |
|
|
|
try { |
|
|
|
await completeUpload(); |
|
|
|
console.log(`文件上传完成:${file.name} \n分片:${chunks} 大小:${file.size} 用时:${(new Date().getTime() - time) / 1000} s`); |
|
|
|
this.uploadLength++; |
|
|
|
this.updateProgress(file, "上传成功", 100, 0); |
|
|
|
this.uploadSuccessLength++; |
|
|
|
this.updateFileStatus(file, "上传成功", 100, 0); |
|
|
|
this.uploadSuccess(file); |
|
|
|
} catch (err) { |
|
|
|
const info = "上传失败"; |
|
|
|
console.log(info, file) |
|
|
|
this.uploadLength++; |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateProgress(file, info, Number(((currentChunk / chunks) * 100).toFixed(2)) - 1, 2); |
|
|
|
this.updateFileStatus(file, info, Number(((currentChunk / chunks) * 100).toFixed(2)) - 1, 2); |
|
|
|
} |
|
|
|
} |
|
|
|
} catch (err) { |
|
|
|
@@ -397,13 +394,13 @@ export default { |
|
|
|
console.log(info, file) |
|
|
|
this.uploadLength++; |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateProgress(file, info, Number(((currentChunk / chunks) * 100).toFixed(2)) - 1, 2); |
|
|
|
this.updateFileStatus(file, info, Number(((currentChunk / chunks) * 100).toFixed(2)) - 1, 2); |
|
|
|
} |
|
|
|
}; |
|
|
|
console.log("上传分片..."); |
|
|
|
loadNext(); |
|
|
|
}, |
|
|
|
uploadError(file, info) { |
|
|
|
uploadError(file, info) { |
|
|
|
file.previewTemplate.querySelector('.dz-success-mark').style.opacity = 0; |
|
|
|
file.previewTemplate.querySelector('.dz-error-mark').style.opacity = 1; |
|
|
|
file.previewTemplate.querySelector('.dz-error-message span').innerHTML = info; |
|
|
|
@@ -428,8 +425,14 @@ export default { |
|
|
|
uploadFinishCheck(file) { |
|
|
|
console.log('uploadFinishCheck', file, this.uploadLength, '/', this.uploadFiles.length); |
|
|
|
if (this.uploadLength === this.uploadFiles.length) { |
|
|
|
console.log('All file has finish'); |
|
|
|
console.log('All file has finish, success ' + this.uploadSuccessLength); |
|
|
|
this.uploading = false; |
|
|
|
if (this.uploadSuccessLength == this.uploadLength) { |
|
|
|
const list = window.location.href.split('/'); |
|
|
|
list.pop(); |
|
|
|
list.push('show_model_info'); |
|
|
|
window.location.href = list.join('/') + '?name=' + this.state.name; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
submit() { |
|
|
|
@@ -447,7 +450,7 @@ export default { |
|
|
|
if (file.uploadID == '' || file.uuid == '') { // 未上传过 |
|
|
|
this.newUpload(file); |
|
|
|
} else if (file.uploaded == '1') { // 已上传成功 秒传 |
|
|
|
if (file.attachID == '0') { // 删除数据集记录,未删除文件 |
|
|
|
if (file.attachID == '0') { // 删除数据集记录,未删除文件 |
|
|
|
// await addAttachment(file); |
|
|
|
console.log(`file.attachID == '0'`); |
|
|
|
} |
|
|
|
@@ -455,8 +458,8 @@ export default { |
|
|
|
if (file.modelUuid != '' && file.modelName != '' && file.realName != '') { |
|
|
|
const info = `该文件已上传在模型: ${file.modelName}`; |
|
|
|
this.uploadLength++; |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateProgress(file, "上传失败", 0, 1, info); |
|
|
|
this.uploadError(file, info); |
|
|
|
this.updateFileStatus(file, "上传失败", 0, 1, info); |
|
|
|
} |
|
|
|
console.log(file.name, '文件处理完成'); |
|
|
|
} else { // 断点续传 |
|
|
|
@@ -466,13 +469,13 @@ export default { |
|
|
|
console.info('getChunksInfo', err); |
|
|
|
this.uploadLength++; |
|
|
|
this.uploadError(file, "上传失败"); |
|
|
|
this.updateProgress(file, "上传失败", 0, 2); |
|
|
|
this.updateFileStatus(file, "上传失败", 0, 2); |
|
|
|
}); |
|
|
|
}).catch(err => { |
|
|
|
console.info('calcFileMd5', err); |
|
|
|
this.uploadLength++; |
|
|
|
this.uploadError(file, '上传失败'); |
|
|
|
this.updateProgress(file, "上传失败", 0, 2); |
|
|
|
this.updateFileStatus(file, "上传失败", 0, 2); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
@@ -648,8 +651,6 @@ export default { |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
.txt {} |
|
|
|
|
|
|
|
&.focused { |
|
|
|
border-color: rgb(50, 145, 248); |
|
|
|
color: rgb(50, 145, 248); |
|
|
|
@@ -704,31 +705,38 @@ export default { |
|
|
|
font-size: 16px; |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.failed { |
|
|
|
color: red; |
|
|
|
font-size: 16px; |
|
|
|
margin-right: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
.datast-upload-progress { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.datast-upload-progress .dataset-name { |
|
|
|
text-align: right; |
|
|
|
width: 200px; |
|
|
|
margin-right: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.datast-upload-progress .dataset-progress { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.datast-upload-progress .dataset-status { |
|
|
|
width: 100px; |
|
|
|
margin-left: 1rem; |
|
|
|
} |
|
|
|
|
|
|
|
.datast-upload-progress .dataset-status .status-flex { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-progress-bar__inner { |
|
|
|
background-color: #21ba45; |
|
|
|
} |
|
|
|
|