diff --git a/frontend/admin/src/components/problem/testCaseMgnt.vue b/frontend/admin/src/components/problem/testCaseMgnt.vue
index 431975d..0aa4cdb 100644
--- a/frontend/admin/src/components/problem/testCaseMgnt.vue
+++ b/frontend/admin/src/components/problem/testCaseMgnt.vue
@@ -1,41 +1,44 @@
 <template>
-    <div>
-        <div class="col-md-12">
-            <label>{{ $t("problem.testCase") }}
-                <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
-            </label>
-            <small class="text-info">
-                请将所有测试用例打包在一个zip文件中上传，所有文件要在压缩包的根目录，且输入输出文件名要以从1开始连续数字标识要对应例如：
-                <br>1.in 1.out 2.in 2.out(普通题目)或者1.in 2.in 3.in(Special Judge)
-                <a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
-                   target="_blank">{{ $t("adminUtils.help") }}
-                </a>
-            </small>
-            <p>{{ $t("problem.uploadProgress") }}<span v-text="uploadProgress"></span>%</p>
-            <table class="table table-striped" v-if="testCaseList">
-                <tr>
-                    <td>ID</td>
-                    <td>{{ $t("adminUtils.input") }}</td>
-                    <td>{{ $t("adminUtils.output") }}</td>
-                </tr>
-                <tr v-for="testCase in testCaseList">
-                    <td>{{ $index + 1 }}</td>
-                    <td>{{ testCase.input }}</td>
-                    <td>{{ testCase.output }}</td>
-                </tr>
-            </table>
-        </div>
-        <div class="col-md-12">
-            <div class="form-group">
-                <uploader uploader-id="testCaseUploader"
-                          upload-path="/"
-                          :accept="{title: 'testcase zip', extensions: 'zip', mimeTypes: 'application/zip'}"
-                          :upload-success="uploadSuccess"
-                          :upload-error="uploadError"
-                          :upload-progress="uploadProgress">
-                </uploader>
+    <div class="col-md-12">
+        <label>
+            {{ $t("problem.testCase") }}
+            <a href="https://github.com/QingdaoU/OnlineJudge/wiki/%E6%B5%8B%E8%AF%95%E7%94%A8%E4%BE%8B%E4%B8%8A%E4%BC%A0"
+               target="_blank">{{ $t("adminUtils.help") }}
+            </a>
+            <a v-show="downloadUrl" v-bind:href="downloadUrl">{{ $t("adminUtils.download") }}</a>
+        </label>
+        <br>
+        <label>{{ $t("problem.uploadProgress") }}</label>
+        <div class="progress">
+            <div class="progress-bar progress-bar-striped" role="progressbar " aria-valuenow="{{ uploadProgress }}"
+                 aria-valuemin="0"
+                 aria-valuemax="100"
+                 v-bind:style="{width: uploadProgress+'%'}">
+                {{ uploadProgress }} %
             </div>
         </div>
+
+        <table class="table table-striped" v-if="testCaseList">
+            <tr>
+                <td>ID</td>
+                <td>{{ $t("adminUtils.input") }}</td>
+                <td>{{ $t("adminUtils.output") }}</td>
+            </tr>
+            <tr v-for="testCase in testCaseList">
+                <td>{{ $index + 1 }}</td>
+                <td>{{ testCase.input }}</td>
+                <td>{{ testCase.output }}</td>
+            </tr>
+        </table>
+        <div class="form-group">
+            <uploader uploader-id="testCaseUploader"
+                      upload-path="/"
+                      :accept="{title: 'testcase zip', extensions: 'zip', mimeTypes: 'application/zip'}"
+                      :upload-success="uploadSuccess"
+                      :upload-error="uploadError"
+                      :upload-progress.sync="uploadProgress">
+            </uploader>
+        </div>
     </div>
 </template>
 
@@ -54,14 +57,12 @@
             uploader
         },
         methods: {
-            uploadSuccess: (f, response)=> {
+            uploadSuccess(f, response){
                 alert("success");
             },
-            uploadError: (f, reason)=> {
+            uploadError(f, reason){
+                this.uploadProgress = 0;
                 alert("error");
-            },
-            uploadProgress: (file, percentage)=> {
-                console.log(percentage);
             }
         }
     })
diff --git a/frontend/admin/src/components/utils/uploader.vue b/frontend/admin/src/components/utils/uploader.vue
index 5354da7..ad8443b 100644
--- a/frontend/admin/src/components/utils/uploader.vue
+++ b/frontend/admin/src/components/utils/uploader.vue
@@ -46,9 +46,11 @@
             uploader.on("uploadBeforeSend", (obj, data, headers)=> {
                 headers["X-CSRFToken"] = getCookie("csrftoken");
             });
-            uploader.on("uploadSuccess", this.uploadSuccess);
+            uploader.on("uploadProgress", (f, percentage)=> {
+                this.uploadProgress = Math.round(percentage * 100);
+            });
             uploader.on("uploadError", this.uploadError);
-            uploader.on("uploadProgress", this.uploadProgress);
+            uploader.on("uploadSuccess", this.uploadSuccess);
         }
     })
 </script>