diff --git a/backend/src/main/java/io/metersphere/xpack b/backend/src/main/java/io/metersphere/xpack
index cf6b065263..ee74568be0 160000
--- a/backend/src/main/java/io/metersphere/xpack
+++ b/backend/src/main/java/io/metersphere/xpack
@@ -1 +1 @@
-Subproject commit cf6b06526324326a563d933e07118fac014a63b4
+Subproject commit ee74568be0beba46da19616f5832e83f9164c688
diff --git a/frontend/src/business/components/track/case/components/TestCaseAttachment.vue b/frontend/src/business/components/track/case/components/TestCaseAttachment.vue
new file mode 100644
index 0000000000..c8dae4fa45
--- /dev/null
+++ b/frontend/src/business/components/track/case/components/TestCaseAttachment.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-row type="flex" justify="center">
+      <el-col>
+        <el-table class="basic-config" :data="tableData">
+          <el-table-column
+            prop="name"
+            :label="$t('load_test.file_name')">
+          </el-table-column>
+          <el-table-column
+            prop="size"
+            :label="$t('load_test.file_size')">
+          </el-table-column>
+          <el-table-column
+            prop="type"
+            :label="$t('load_test.file_type')">
+          </el-table-column>
+          <el-table-column
+            :label="$t('test_track.case.upload_time')">
+            <template v-slot:default="scope">
+              <i class="el-icon-time"/>
+              <span class="last-modified">{{ scope.row.updateTime | timestampFormatDate }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('commons.operating')">
+            <template v-slot:default="scope">
+              <el-button @click="preview(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
+                         v-if="isPreview(scope.row)"
+                         icon="el-icon-view"
+                         size="mini" circle/>
+              <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
+                         icon="el-icon-download"
+                         size="mini" circle/>
+              <el-button :disabled="readOnly || !isDelete" @click="handleDelete(scope.row, scope.$index)" type="danger"
+                         icon="el-icon-delete" size="mini"
+                         circle/>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+    </el-row>
+
+    <test-case-file ref="testCaseFile"/>
+  </div>
+</template>
+
+<script>
+import TestCaseFile from "@/business/components/track/case/components/TestCaseFile";
+import {Message} from "element-ui";
+
+export default {
+  name: "TestCaseAttachment",
+  components: {TestCaseFile},
+  props: {
+    tableData: Array,
+    readOnly: {
+      type: Boolean,
+      default: true
+    },
+    isDelete: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    preview(row) {
+      this.$refs.testCaseFile.open(row);
+    },
+    isPreview(row) {
+      const fileType = row.type;
+      return fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PDF' || fileType === 'PNG';
+    },
+    handleDownload(file) {
+      let data = {
+        name: file.name,
+        id: file.id,
+      };
+      let config = {
+        url: '/test/case/file/download',
+        method: 'post',
+        data: data,
+        responseType: 'blob'
+      };
+      this.result = this.$request(config).then(response => {
+        const content = response.data;
+        const blob = new Blob([content]);
+        if ("download" in document.createElement("a")) {
+          // 非IE下载
+          //  chrome/firefox
+          let aTag = document.createElement('a');
+          aTag.download = file.name;
+          aTag.href = URL.createObjectURL(blob);
+          aTag.click();
+          URL.revokeObjectURL(aTag.href)
+        } else {
+          // IE10+下载
+          navigator.msSaveBlob(blob, this.filename)
+        }
+      }).catch(e => {
+        Message.error({message: e.message, showClose: true});
+      });
+    },
+    handleDelete(file, index) {
+      this.$emit("handleDelete", file, index);
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index ac1a3d9511..20ef8f4d09 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -226,47 +226,15 @@
               <span slot="tip" class="el-upload__tip"> {{ $t('test_track.case.upload_tip') }} </span>
             </el-upload>
           </el-col>
-        </el-row>
-        <el-row type="flex" justify="center">
-          <el-col :span="20">
-            <el-table class="basic-config" :data="tableData">
-              <el-table-column
-                prop="name"
-                :label="$t('load_test.file_name')">
-              </el-table-column>
-              <el-table-column
-                prop="size"
-                :label="$t('load_test.file_size')">
-              </el-table-column>
-              <el-table-column
-                prop="type"
-                :label="$t('load_test.file_type')">
-              </el-table-column>
-              <el-table-column
-                :label="$t('test_track.case.upload_time')">
-                <template v-slot:default="scope">
-                  <i class="el-icon-time"/>
-                  <span class="last-modified">{{ scope.row.updateTime | timestampFormatDate }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column
-                :label="$t('commons.operating')">
-                <template v-slot:default="scope">
-                  <el-button @click="preview(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
-                             v-if="isPreview(scope.row)"
-                             icon="el-icon-view"
-                             size="mini" circle/>
-                  <el-button @click="handleDownload(scope.row)" :disabled="!scope.row.id || readOnly" type="primary"
-                             icon="el-icon-download"
-                             size="mini" circle/>
-                  <el-button :disabled="readOnly" @click="handleDelete(scope.row, scope.$index)" type="danger"
-                             icon="el-icon-delete" size="mini"
-                             circle/>
-                </template>
-              </el-table-column>
-            </el-table>
+          <el-col :offset="2" :span="20">
+            <test-case-attachment :table-data="tableData"
+                                  :read-only="readOnly"
+                                  :is-delete="true"
+                                  @handleDelete="handleDelete"
+            />
           </el-col>
         </el-row>
+
       </el-form>
 
       <template v-slot:footer>
@@ -281,7 +249,6 @@
 
     </el-dialog>
 
-    <test-case-file ref="testCaseFile"/>
   </div>
 
 
@@ -294,11 +261,11 @@ import MsDialogFooter from '../../../common/components/MsDialogFooter'
 import {listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
 import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
 import {Message} from "element-ui";
-import TestCaseFile from "@/business/components/track/case/components/TestCaseFile";
+import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
 
 export default {
   name: "TestCaseEdit",
-  components: {MsDialogFooter, TestCaseFile},
+  components: {MsDialogFooter, TestCaseAttachment},
   data() {
     return {
       result: {},
@@ -723,13 +690,6 @@ export default {
     fileValidator(file) {
       /// todo: 是否需要对文件内容和大小做限制
       return file.size > 0;
-    },
-    preview(row) {
-      this.$refs.testCaseFile.open(row);
-    },
-    isPreview(row) {
-      const fileType = row.type;
-      return fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PDF' || fileType === 'PNG';
     }
   }
 }
diff --git a/frontend/src/business/components/track/case/components/TestCaseFile.vue b/frontend/src/business/components/track/case/components/TestCaseFile.vue
index df4243b4df..9992518869 100644
--- a/frontend/src/business/components/track/case/components/TestCaseFile.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseFile.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="dialogVisible" width="80%" :destroy-on-close="true" :before-close="close">
+  <el-dialog :visible.sync="dialogVisible" width="80%" :destroy-on-close="true" :before-close="close" :append-to-body="true">
     <div>
       <img :src="'/test/case/file/preview/' + file.id" :alt="$t('test_track.case.img_loading_fail')" style="width: 100%;height: 100%;"
            v-if="file.type === 'JPG' || file.type === 'JPEG' || file.type === 'PNG'">
diff --git a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
index 077d2b9dee..b3840820da 100644
--- a/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/TestPlanTestCaseEdit.vue
@@ -299,6 +299,21 @@
                 </div>
               </el-col>
             </el-row>
+
+            <el-row>
+              <el-col :span="15" :offset="1">
+                <div>
+                  <span class="cast_label">{{ $t('test_track.case.attachment') }}:</span>
+                </div>
+                <div>
+                  <test-case-attachment :table-data="tableData"
+                                        :read-only="isReadOnly"
+                                        :is-delete="false"
+                                        @handleDelete="handleDelete"
+                  />
+                </div>
+              </el-col>
+            </el-row>
           </div>
 
         </el-scrollbar>
@@ -320,6 +335,7 @@ import ApiTestResult from "./test/ApiTestResult";
 import PerformanceTestDetail from "./test/PerformanceTestDetail";
 import PerformanceTestResult from "./test/PerformanceTestResult";
 import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
+import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
 
 export default {
   name: "TestPlanTestCaseEdit",
@@ -328,7 +344,8 @@ export default {
     PerformanceTestDetail,
     ApiTestResult,
     ApiTestDetail,
-    TestPlanTestCaseStatusButton
+    TestPlanTestCaseStatusButton,
+    TestCaseAttachment
   },
   data() {
     return {
@@ -348,7 +365,8 @@ export default {
       activeTab: 'detail',
       isFailure: true,
       users: [],
-      hasTapdId: false
+      hasTapdId: false,
+      tableData: [],
     };
   },
   props: {
@@ -449,6 +467,20 @@ export default {
       this.initTest();
       this.getIssues(testCase.caseId);
       this.stepResultChange();
+      this.getFileMetaData(testCase);
+    },
+    getFileMetaData(testCase) {
+      this.tableData = [];
+      this.result = this.$get("test/case/file/metadata/" + testCase.caseId, response => {
+        let files = response.data;
+        if (!files) {
+          return;
+        }
+        this.tableData = JSON.parse(JSON.stringify(files));
+        this.tableData.map(f => {
+          f.size = f.size + ' Bytes';
+        });
+      })
     },
     openTestCaseEdit(testCase) {
       this.showDialog = true;
@@ -589,6 +621,9 @@ export default {
         this.getIssues(this.testCase.caseId);
         this.$success(this.$t('commons.delete_success'));
       })
+    },
+    handleDelete() {
+
     }
   }
 }
diff --git a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
index b6f459fd22..91744b384e 100644
--- a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
+++ b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
@@ -201,6 +201,22 @@
                       </div>
                     </el-col>
                   </el-row>
+
+                  <el-row>
+                    <el-col :span="20" :offset="1">
+                      <div>
+                        <span class="cast_label">{{ $t('test_track.case.attachment') }}:</span>
+                      </div>
+                      <div>
+                        <test-case-attachment :table-data="tableData"
+                                              :read-only="false"
+                                              :is-delete="false"
+                                              @handleDelete="handleDelete"
+                        />
+                      </div>
+                    </el-col>
+                  </el-row>
+
                 </div>
 
               </el-scrollbar>
@@ -234,6 +250,7 @@ import ApiTestDetail from "../../../plan/view/comonents/test/ApiTestDetail";
 import TestPlanTestCaseStatusButton from "../../../plan/common/TestPlanTestCaseStatusButton";
 import {listenGoBack, removeGoBackListener} from "@/common/js/utils";
 import ReviewComment from "../../commom/ReviewComment";
+import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
 
 export default {
   name: "TestReviewTestCaseEdit",
@@ -243,7 +260,8 @@ export default {
     ApiTestResult,
     ApiTestDetail,
     TestPlanTestCaseStatusButton,
-    ReviewComment
+    ReviewComment,
+    TestCaseAttachment
   },
   data() {
     return {
@@ -258,7 +276,8 @@ export default {
       isFailure: true,
       users: [],
       activeName: 'comment',
-      comments: []
+      comments: [],
+      tableData: []
     };
   },
   props: {
@@ -332,6 +351,20 @@ export default {
       this.testCase = item;
       this.getComments(item);
       this.initTest();
+      this.getFileMetaData(testCase);
+    },
+    getFileMetaData(testCase) {
+      this.tableData = [];
+      this.result = this.$get("test/case/file/metadata/" + testCase.caseId, response => {
+        let files = response.data;
+        if (!files) {
+          return;
+        }
+        this.tableData = JSON.parse(JSON.stringify(files));
+        this.tableData.map(f => {
+          f.size = f.size + ' Bytes';
+        });
+      })
     },
     openTestCaseEdit(testCase) {
       this.showDialog = true;
@@ -406,6 +439,9 @@ export default {
         }).length > 0;
       }
     },
+    handleDelete() {
+
+    }
   }
 }
 </script>
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index 06d935cd1d..cc38137a69 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit 06d935cd1d22ab36f09763745c2aff8ad3fb08c1
+Subproject commit cc38137a69a0f20fadece9c0f9f50a9468c4ace9