diff --git a/frontend/src/Global.vue b/frontend/src/Global.vue
new file mode 100644
index 0000000..0484502
--- /dev/null
+++ b/frontend/src/Global.vue
@@ -0,0 +1,8 @@
+<script>
+const server_config = {
+    url: 'http://localhost:8080'
+};
+export default {
+    server_config
+}
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/SingleFileUpload.vue b/frontend/src/components/SingleFileUpload.vue
index bacb620..3cdd71e 100644
--- a/frontend/src/components/SingleFileUpload.vue
+++ b/frontend/src/components/SingleFileUpload.vue
@@ -1,11 +1,88 @@
 <template>
-    单文件上传
+  <div>
+    <input ref="fileInput" type="file" @change="handleFileSelect" style="display: none;" />
+    <el-button id="browse_button" type="primary" @click="browseFile">Select File</el-button>
+    <el-button id="danger" type="success" @click="uploadFile" :disabled="!selectedFile">Upload</el-button>
+    
+    <el-dialog title="Uploading" v-model="uploadDialogVisible">
+      <el-progress :percentage="uploadProgress"></el-progress>
+      <div v-if="uploadStatus === 'error'" style="color: red; margin-top: 10px;">
+        {{ uploadMessage }}
+      </div>
+      <div v-else-if="uploadStatus === 'success'" style="color: green; margin-top: 10px;">
+        {{ uploadMessage }}
+      </div>
+    </el-dialog>
+    
+    <br>
+    <br>
+    <el-tag type="warning">You can only upload pictures or zips.</el-tag>
+    <div v-if="selectedFile" style="margin-top: 10px;">
+      Selected file: {{ selectedFile.name }}
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  props: {
-    msg: String
+  name: 'SingleFileUpload',
+  data() {
+    return {
+      selectedFile: null,
+      uploadDialogVisible: false,
+      uploadProgress: 0,
+      uploadStatus: '', // 'success', 'error', ''
+      uploadMessage: ''
+    }
+  },
+  methods: {
+    browseFile() {
+      this.$refs.fileInput.click();
+    },
+    handleFileSelect(event) {
+      const file = event.target.files[0];
+      if (file) {
+        // 验证文件类型
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'application/zip'];
+        if (allowedTypes.includes(file.type)) {
+          this.selectedFile = file;
+          this.uploadMessage = '';
+        } else {
+          this.selectedFile = null;
+          this.uploadMessage = 'Please select a valid file (image or zip).';
+        }
+      }
+    },
+    async uploadFile() {
+      if (!this.selectedFile) return;
+      
+      this.uploadDialogVisible = true;
+      this.uploadProgress = 0;
+      this.uploadStatus = '';
+      this.uploadMessage = '';
+      
+      try {
+        // 模拟上传过程
+        await this.simulateUpload();
+        this.uploadStatus = 'success';
+        this.uploadMessage = 'File uploaded successfully!';
+      } catch (error) {
+        this.uploadStatus = 'error';
+        this.uploadMessage = 'Upload failed: ' + error.message;
+      }
+    },
+    simulateUpload() {
+      return new Promise((resolve) => {
+        const interval = setInterval(() => {
+          this.uploadProgress += 10;
+          if (this.uploadProgress >= 100) {
+            clearInterval(interval);
+            // 模拟上传成功
+            resolve();
+          }
+        }, 200);
+      });
+    }
   }
 }
 </script>