上传进度条

Contest/contest.client/src/view/myactivity/MyActivity.less

@@ -167,6 +167,21 @@
                         margin-right: 5px;
                     }
                 }
+
+                .file-list-box {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 5px;
+                    font-size: 16px;
+
+                    .el-icon {
+                        cursor: pointer;
+
+                        &:hover {
+                            color: #409eff;
+                        }
+                    }
+                }
             }
 
             .sk-info {

Contest/contest.client/src/view/myactivity/MyActivity.vue

@@ -200,7 +200,7 @@
                                         </div>
                                     </template>
                                     <template v-if="contest?.upload && contest.upload.actState === 'going' && !contest?.upload.captainUpload || contest?.upload.captainUpload && isLeader">
-                                        <el-upload class="upload-demo" ref="refUpload" :file-list="fileList" :accept="accept" drag multiple :on-remove="handleRemove" :on-change="handleChange" :auto-upload="false" action="">
+                                        <el-upload class="upload-demo" ref="refUpload" :file-list="fileList" :accept="accept" drag multiple :on-change="handleChange" :auto-upload="false" action="">
                                             <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
                                             <div class="el-upload__text">
                                                 上传作品
@@ -222,8 +222,17 @@
                                                     </template>
                                                 </div>
                                             </template>
+                                            <template #file="UploadFile">
+                                                <p class="file-list-box">
+                                                    <span>{{ UploadFile.file.name }}</span>
+                                                    <el-icon v-show="!isUpload" size="20" @click="handleRemove(UploadFile.file)"><Close /></el-icon>
+                                                </p>
+                                                <p class="file-list-progress">
+                                                    <el-progress :percentage="UploadFile.file.progress" :status="UploadFile.file.progress === 100 ? 'success' : ''" />
+                                                </p>
+                                            </template>
                                         </el-upload>
-                                        <el-button type="success" @click="uploadFile()">
+                                        <el-button type="success" @click="uploadFile()" v-show="!isUpload">
                                             上传
                                         </el-button>
                                     </template>
@@ -313,7 +322,7 @@
 </template>
 
 <script setup>
-import { Search, Delete, UserFilled, Clock, UploadFilled, CaretBottom, CaretRight, WarnTriangleFilled, DArrowRight, CloseBold, Warning, Filter, Trophy, Edit, Folder, Finished, CircleCheck } from '@element-plus/icons-vue'
+import { Search, Delete, UserFilled, Clock, UploadFilled, CaretBottom, CaretRight, WarnTriangleFilled, DArrowRight, CloseBold, Warning, Filter, Trophy, Edit, Folder, Finished, CircleCheck, Close } from '@element-plus/icons-vue'
 import { ElMessageBox, ElMessage, FormRules, ElLoading } from 'element-plus'
 import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { useStore } from "@/pinia/common"
@@ -340,6 +349,7 @@ let isLeader = ref(false)
 let previewStatus = ref(false)
 let uploadDia = ref(false)
 let scoreDrawer = ref(false)
+let isUpload = ref(false)
 let actList = ref([])
 let ruleTree = ref([])
 let actListShow = ref([])
@@ -609,7 +619,8 @@ function deleteMem(index, info) {
 }
 
 function handleRemove(file, files) {
-    fileList.value = files
+    // fileList.value = files
+    fileList.value = fileList.value.filter(item => item.name != file.name)
 }
 
 function handleChange(file, files) {
@@ -643,6 +654,7 @@ function handleChange(file, files) {
         files.splice(fileList.value.length, 1)
         return
     }
+    file.progress = 0
     fileList.value.push(file)
 }
 
@@ -664,7 +676,11 @@ function uploadBlob() {
             fileList.value.map(item => {
                 let info = toRaw(item)
                 promiseAll.push(new Promise((r, j) => {
-                    Blobs.upload(info.raw, {path, checkSize: false}).then(async res => {
+                    Blobs.upload(info.raw, {path, checkSize: false}, {
+                            onProgress: (e) => {
+                                item.progress = parseInt(e.loadedBytes * 100 / item.size)
+                            }
+                        }).then(async res => {
                         let datas = res
                         // let fileMD5 = await proxy.$tools.getFileMD5(info.raw)
                         datas.hash = await proxy.$tools.convertFileMD5ToString(res.md5)
@@ -736,18 +752,15 @@ async function startUpload() {
         })
         return
     }
-    
-    loading = ElLoading.service({
-        lock: true,
-        text: '加载中',
-        background: 'rgba(0, 0, 0, 0.7)'
-    })
+    isUpload.value = true
+    uploadDia.value = false
     let blobList = await uploadBlob()
     if(!blobList) {
         ElMessage({
             type: 'warning',
             message: '上传失败'
         })
+        isUpload.value = false
         return
     }
     let params = {
@@ -789,8 +802,7 @@ async function startUpload() {
             await deleteBlobPrefix(actInfo.value.owner, path)
         }
     }).finally(() => {
-        loading.close()
-        uploadDia.value = false
+        isUpload.value = false
     })
 }
 
@@ -898,7 +910,7 @@ watch(nowYear, (newValue, oldValue) => {
         padding: 10px 5px;
 
         &:hover {
-            background-color: #eaeaea;
+            background-color: #f2f2f2;
         }
         .el-icon--close {
             font-size: 19px;
@@ -909,5 +921,35 @@ watch(nowYear, (newValue, oldValue) => {
     .el-upload-list__item-name {
         font-size: 16px;
     }
+
+    .el-step__head.is-finish,
+    .el-step__title.is-finish,
+    .el-step__description.is-finish {
+        color: #85bc73;
+        border-color: #9cba92;
+    }
+
+    .el-step__head.is-process,
+    .el-step__title.is-process,
+    .el-step__description.is-process {
+        color: #409eff;
+        border-color: #409eff;
+
+    }
+
+    .upload-demo {
+        .el-upload-list__item .el-progress {
+            position: relative;
+            top: 0;
+        }
+
+        .el-upload-list__item .el-progress__text {
+            position: relative;
+            top: 0;
+        }
+        .el-upload-list__item:hover .el-progress__text {
+            display: block;
+        }
+    }
 }
 </style>