diff --git a/src/compenents/index.ts b/src/compenents/index.ts
index 87b08d0..a662ea6 100644
--- a/src/compenents/index.ts
+++ b/src/compenents/index.ts
@@ -1,3 +1,4 @@
 export * from "./footer";
 export * from "./header";
-export * from "./leftMenu";
\ No newline at end of file
+export * from "./leftMenu";
+export * from "./uploadImageButton";
\ No newline at end of file
diff --git a/src/compenents/uploadImageButton/index.less b/src/compenents/uploadImageButton/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/compenents/uploadImageButton/index.tsx b/src/compenents/uploadImageButton/index.tsx
new file mode 100644
index 0000000..907c0bf
--- /dev/null
+++ b/src/compenents/uploadImageButton/index.tsx
@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Button, Drawer } from "antd";
+
+export const UploadImageButton: React.FC = () => {
+  const [showModal, setShowModal] = useState<boolean>(false);
+
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setShowModal(true);
+        }}
+      >
+        上传图片
+      </Button>
+
+      {showModal && (
+        <Drawer
+          title="Basic Drawer"
+          placement="right"
+          onClose={() => {
+            setShowModal(false);
+          }}
+          open={showModal}
+        >
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+          <p>Some contents...</p>
+        </Drawer>
+      )}
+    </>
+  );
+};
diff --git a/src/pages/index.ts b/src/pages/index.ts
index f3aaee1..d5671e0 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -2,4 +2,5 @@ export * from "./home";
 export * from "./login";
 export * from "./dashboard";
 export * from "./error";
-export * from "./course";
\ No newline at end of file
+export * from "./course";
+export * from "./test";
\ No newline at end of file
diff --git a/src/pages/test/index.module.less b/src/pages/test/index.module.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/test/index.tsx b/src/pages/test/index.tsx
new file mode 100644
index 0000000..18639fc
--- /dev/null
+++ b/src/pages/test/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { UploadImageButton } from "../../compenents";
+
+export const TestPage: React.FC = () => {
+  return (
+    <div>
+      <UploadImageButton></UploadImageButton>
+    </div>
+  );
+};
diff --git a/src/router/routes.tsx b/src/router/routes.tsx
index 2b22750..318ea9c 100644
--- a/src/router/routes.tsx
+++ b/src/router/routes.tsx
@@ -1,5 +1,12 @@
 import { RouteObject } from "react-router-dom";
-import { Login, HomePage, Dashboard, ErrorPage, VodListPage } from "../pages";
+import {
+  Login,
+  HomePage,
+  Dashboard,
+  ErrorPage,
+  VodListPage,
+  TestPage,
+} from "../pages";
 
 const routes: RouteObject[] = [
   {
@@ -20,6 +27,10 @@ const routes: RouteObject[] = [
     path: "/login",
     element: <Login />,
   },
+  {
+    path: "/test",
+    element: <TestPage />,
+  },
   {
     path: "*",
     element: <ErrorPage />,