feat: upload files

src/pages/user/edit/Profile.tsx

@@ -1,14 +1,16 @@
-import { Form, Input } from 'antd';
+import { Button, Form, Input } from 'antd';
 import { useUserStore } from '../store';
-import { useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { isObjectNull } from '@/utils/is-null';
 import { useLayoutStore } from '@/modules/layout/store';
 import { AvatarUpload } from '../module/AvatarUpload';
 import { UploadOutlined } from '@ant-design/icons';
 import PandaPNG from '@/assets/panda.png';
+import { FileUpload } from '../module/FileUpload';
 export const Profile = () => {
   const [form] = Form.useForm();
+  const ref = useRef<any>(null);
   const userStore = useUserStore(
     useShallow((state) => {
       return {
@@ -17,18 +19,20 @@ export const Profile = () => {
         formData: state.formData,
         updateData: state.updateData,
         setFormData: state.setFormData,
+        updateSelf: state.updateSelf,
       };
     }),
   );
-
+  const [avatar, setAvatar] = useState<string>('');
   const layoutStore = useLayoutStore(
     useShallow((state) => {
       return {
         me: state.me,
+        setMe: state.setMe,
       };
     }),
   );
-  const avatar = layoutStore.me?.avatar;
+  // const avatar = layoutStore.me?.avatar;
   useEffect(() => {
     const fromData = layoutStore.me;
     if (isObjectNull(fromData)) {
@@ -36,8 +40,20 @@ export const Profile = () => {
     } else {
       form.setFieldsValue(fromData);
     }
-    console.log('fromData', fromData);
+    setAvatar(fromData.avatar || '');
   }, [layoutStore.me]);
+  const onChange = (path: string) => {
+    let url = '/resources/' + path;
+    console.log('path', url);
+    form.setFieldsValue({ avatar: url });
+    setAvatar(url + '?t=' + new Date().getTime());
+  };
+  const onFinish = async (values) => {
+    const newMe = await userStore.updateSelf(values);
+    if (newMe) {
+      layoutStore.setMe(newMe);
+    }
+  };
   return (
     <div className='w-full h-full bg-gray-200 p-4'>
       <div className='border shadow-lg p-4 bg-white rounded-lg'>
@@ -51,23 +67,24 @@ export const Profile = () => {
             </div>
             <Form
               form={form}
+              onFinish={onFinish}
               labelCol={{
                 span: 4,
               }}>
               <Form.Item label='Name' name='username'>
                 <Input className='w-full border rounded-lg p-2' disabled />
               </Form.Item>
-              <Form.Item label='id' name='id' hidden>
-                <Input />
-              </Form.Item>
-              <Form.Item label='avatar' name='Avatar'>
+              <Form.Item label='Avatar' name='avatar'>
                 <Input
                   addonAfter={
-                    <UploadOutlined
-                      onClick={() => {
-                        console.log('upload');
-                      }}
-                    />
+                    <div>
+                      <UploadOutlined
+                        onClick={() => {
+                          ref.current?.open?.();
+                        }}
+                      />
+                      <FileUpload ref={ref} onChange={onChange} />
+                    </div>
                   }
                 />
               </Form.Item>
@@ -75,13 +92,9 @@ export const Profile = () => {
                 <Input.TextArea rows={4} />
               </Form.Item>
               <Form.Item label=' ' colon={false}>
-                <button
-                  className='bg-blue-500 text-white px-4 py-2 rounded-lg'
-                  onClick={() => {
-                    userStore.updateData(form.getFieldsValue());
-                  }}>
+                <Button className='' htmlType='submit'>
                   保存
-                </button>
+                </Button>
               </Form.Item>
             </Form>
           </div>