论坛发布动态开发，错误图片资源升级为全局

pages/forum/components/publishMessage/index.tsx

-import { Form, Input, Modal } from "antd";
+import { PlusOutlined } from "@ant-design/icons";
+import { Form, Input, Modal, Upload } from "antd";
+import type { RcFile, UploadProps } from "antd/es/upload";
+import type { UploadFile } from "antd/es/upload/interface";
 import { useState } from "react";
 
+const getBase64 = (file: RcFile): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+
 type Props = {
   open: boolean;
-  onOk: () =>{},
-  onCancel: () => {}
+  onOk?: () => void;
+  onCancel?: () => void;
 };
 
-export default function publishMessage() {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+export default function publishMessage(props: Props) {
   const [confirmLoading, setConfirmLoading] = useState(false);
 
-  const showModal = () => {
-    setIsModalOpen(true);
-  };
-
   const handleOk = () => {
     setConfirmLoading(true);
     setTimeout(() => {
-      setIsModalOpen(false);
+      handleCancel();
       setConfirmLoading(false);
     }, 2000);
   };
 
   const handleCancel = () => {
-    setIsModalOpen(false);
+    props.onCancel && props.onCancel();
   };
+
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [previewImage, setPreviewImage] = useState("");
+  const [previewTitle, setPreviewTitle] = useState("");
+  const [fileList, setFileList] = useState<UploadFile[]>([
+    {
+      uid: "-1",
+      name: "image.png",
+      status: "done",
+      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+    },
+    {
+      uid: "-2",
+      name: "image.png",
+      status: "done",
+      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+    },
+    {
+      uid: "-3",
+      name: "image.png",
+      status: "done",
+      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+    },
+    {
+      uid: "-4",
+      name: "image.png",
+      status: "done",
+      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+    },
+    {
+      uid: "-xxx",
+      percent: 50,
+      name: "image.png",
+      status: "uploading",
+      url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+    },
+    {
+      uid: "-5",
+      name: "image.png",
+      status: "error",
+    },
+  ]);
+
+  const handlePreviewCancel = () => setPreviewOpen(false);
+
+  const handlePreview = async (file: UploadFile) => {
+    if (!file.url && !file.preview) {
+      file.preview = await getBase64(file.originFileObj as RcFile);
+    }
+
+    setPreviewImage(file.url || (file.preview as string));
+    setPreviewOpen(true);
+    setPreviewTitle(
+      file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1)
+    );
+  };
+
+  const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) =>
+    setFileList(newFileList);
+
+  const uploadButton = (
+    <div>
+      <PlusOutlined />
+      <div style={{ marginTop: 8 }}>Upload</div>
+    </div>
+  );
   return (
     <Modal
       title=""
-      open={isModalOpen}
+      open={props.open}
       onOk={handleOk}
       onCancel={handleCancel}
       width={500}
@@ -51,7 +123,25 @@ export default function publishMessage() {
             style={{ height: 120, resize: "none" }}
           ></Input.TextArea>
         </Form.Item>
-        <Form.Item></Form.Item>
+        <Form.Item>
+          <Upload
+            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+            listType="picture-card"
+            fileList={fileList}
+            onPreview={handlePreview}
+            onChange={handleChange}
+          >
+            {fileList.length >= 8 ? null : uploadButton}
+          </Upload>
+          <Modal
+            open={previewOpen}
+            title={previewTitle}
+            footer={null}
+            onCancel={handlePreviewCancel}
+          >
+            <img alt="example" style={{ width: "100%" }} src={previewImage} />
+          </Modal>
+        </Form.Item>
       </Form>
     </Modal>
   );

pages/forum/index.tsx

 import { Button, Image, Space, Input, Modal, Form } from "antd";
 import Layout from "~/components/layout";
 import styles from "./index.module.scss";
-import errImg from "./assets/errImg";
+import errImg from "~/assets/errImg";
 import { RightOutlined } from "@ant-design/icons";
 import { useState } from "react";
+import PublishMessage from './components/publishMessage'
 
 export default function forum() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const showModal = () => {
     setIsModalOpen(true);
   };
+
+  const onPublishCancel = () => {
+    setIsModalOpen(false);
+  };
   return (
     <Layout>
       <div className={styles.forum}>
@@ -157,6 +162,10 @@ export default function forum() {
           </div>
         </Space>
       </div>
+      <PublishMessage
+        open={isModalOpen}
+        onCancel={onPublishCancel}
+      ></PublishMessage>
     </Layout>
   );
 }