diff --git a/src/components/upload/upload.module.css b/src/components/upload/upload.module.css
new file mode 100644
index 0000000..2fb6278
--- /dev/null
+++ b/src/components/upload/upload.module.css
@@ -0,0 +1,39 @@
+.uploadContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed #1890ff;
+  padding: 40px;
+  border-radius: 8px;
+  background-color: #f0f5ff;
+  transition: border-color 0.3s;
+}
+
+.uploadContainer:hover {
+  border-color: #40a9ff;
+}
+
+.uploadLabel {
+  font-size: 16px;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.uploadInput {
+  display: none;
+}
+
+.uploadButton {
+  padding: 8px 16px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.uploadButton:hover {
+  background-color: #40a9ff;
+}
diff --git a/src/components/upload/upload.tsx b/src/components/upload/upload.tsx
new file mode 100644
index 0000000..708e9d1
--- /dev/null
+++ b/src/components/upload/upload.tsx
@@ -0,0 +1,44 @@
+// src/component/upload/upload.tsx
+import React, { useState } from 'react'
+import './upload.css'
+
+const UploadComponent: React.FC = () => {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      setSelectedFile(e.target.files[0])
+    }
+  }
+
+  const handleUpload = () => {
+    if (selectedFile) {
+      console.log('上传文件：', selectedFile)
+      // 此处可以添加实际上传逻辑
+    }
+  }
+
+  return (
+    <div className="uploadContainer">
+      <label className="uploadLabel" htmlFor="upload-input">请选择文件上传：</label>
+      <input
+        type="file"
+        id="upload-input"
+        className="uploadInput"
+        data-testid="upload-input"
+        onChange={handleFileChange}
+      />
+      <label htmlFor="upload-input">
+        <div
+          className="uploadButton"
+          data-testid="upload-button"
+          onClick={handleUpload}
+        >
+          点击上传
+        </div>
+      </label>
+    </div>
+  )
+}
+
+export default UploadComponent