aa

app.js

@@ -4,11 +4,7 @@ import fs from "fs";
 import cookieParser from "cookie-parser";
 import mainRouter from "./routes/index.js";
 
-// fs.readdir('uploads', (error) => {
-//     if (error) {
-//         fs.mkdirSync('uploads');
-//     }
-// })
+
 
 const app = express();
 

client/src/apis/user.api.js

@@ -10,6 +10,11 @@ const signup = async (payload) => {
   return data;
 };
 
-const userApi = { login, signup };
+const profileimg = async(formData)=>{
+  const {data} = await axios.put("/api/profileimg",formData);
+  return data;
+}
+
+const userApi = { login, signup, profileimg };
 
 export default userApi;

client/src/components/Profile/Info.js

-import User from "../Room/User";
+import userApi from "../../apis/user.api";
+
+// const INIT_ACCOUNT = {
+//   name: "",
+//   id:"",
+// }
+
+
 
 const Info = () => {
   return (

client/src/components/Profile/InfoUpdate.js

 import { Link } from "react-router-dom";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import userApi from "../../apis/user.api";
+
+const INIT_PROFILE = {
+  id: "",
+  avatarUrl: "",
+};
 
 const InfoUpdate = () => {
-  // const INIT_ACCOUNT={
-  //   name:"",
-  // }
 
-  // const [account, setAccount] = useState(INIT_ACCOUNT)
+  const [profile, setProfile] = useState(INIT_PROFILE);
+
+  
+  // useEffect(()=>{
+  //   setProfile()
+  // },[profile])
 
-  // const handleChange = (e)=>{
-  //   const {name, value, files}=e.target
-  //   if(files){
-  //     setAccount({...account,[name]:files})
-  //     console.log('aaaaaaa')
-  //   } else{
-  //     setAccount({...account, [name]:value})
-  //   }
-  // }
+  const handleChange = async (event) => {
+    const { name, files } = event.target;
+    let formData = new FormData;
+    formData.append("avatarUrl", files[0]);
+    const res = await userApi.profileimg(formData);
+    console.log(res.img)
+    console.log(res.id)
+    setProfile({ ...profile, avatarUrl: res.img})
+    setProfile({ ...profile, id:res.id})
+    };
+
+    const{id,avatarUrl}=profile;
 
-  const id = 1;
-  const number = 1234;
   return (
     <div className="container" style={{ background: "#FCF4FF" }}>
       <div className="row">
@@ -30,7 +39,7 @@ const InfoUpdate = () => {
           >
             프로필 정보
           </label>
-          <Link to={`/profile/${id}`}>
+          <Link to={`/profile/${profile.id}`}>
             <button
               type="button"
               className="btn btn-outline-white "
@@ -54,7 +63,7 @@ const InfoUpdate = () => {
               style={{ position: "relative" }}
             >
               <img
-                src="/cherry.jpg"
+                src='/user.png'
                 id="imgfile"
                 className="rounded-circle mt-2"
                 style={{ height: "320px", width: "320px" }}
@@ -63,24 +72,25 @@ const InfoUpdate = () => {
                 className="d-flex justify-content-end"
                 style={{ position: "absolute", left: "295px", top: "30px" }}
               >
-                <label for="inputfile">
-                  <img
-                    className="rounded-circle"
-                    src="/infoimg.jpg"
-                    // onChange={handleChange}
-                    style={{
-                      width: "50px",
-                      height: "50px",
-                      backgroundColor: "white",
-                    }}
+                  <label for="inputfile">
+                    <img
+                      className="rounded-circle"
+                      src="/infoimg.jpg"
+                      style={{
+                        width: "50px",
+                        height: "50px",
+                        backgroundColor: "white",
+                      }}
+                    />
+                  </label>
+                  <input
+                    onChange={handleChange}
+                    name="avatarUrl"
+                    type="file"
+                    accept="image/*"
+                    id="inputfile"
+                    style={{ display: "none" }}
                   />
-                </label>
-                <input
-                  type="file"
-                  accept="image/*"
-                  id="inputfile"
-                  style={{ display: "none" }}
-                />
               </div>
             </div>
 
@@ -104,7 +114,7 @@ const InfoUpdate = () => {
                 className="justify-content-center ms-2 my-4"
                 style={{ fontSize: "25px", fontWeight: "bold" }}
               >
-                #{number}
+                #{profile.id}
               </div>
             </div>
 
@@ -120,6 +130,7 @@ const InfoUpdate = () => {
                 현재 비밀번호
               </label>
               <input
+                onChange={handleChange}
                 type="text"
                 class="form-control"
                 style={{ height: "38px", width: "200px" }}

controllers/user.controller.js

@@ -2,15 +2,26 @@ import { User } from "../models/index.js";
 import jwt from "jsonwebtoken";
 import config from "../config/app.config.js";
 
-const test = async (req, res) => {
+const multer = require('multer');
+const uploadimg = multer({ dest: 'uploads/' });
+
+const imgUpload = uploadimg.fields([
+    { name: 'avatarUrl', maxCount: 1 }
+])
+
+const update = async (req, res) => {
   try {
-    console.log(req);
-    res.json("안녕");
+       const avatar = req.files['avatarUrl'][0]
+       const avatarUrl = avatar.filename
+       console.log(avatarUrl)
+       await User.update({'img':avatarUrl},{where :{id:'9999'}} )
+       const userId = await User.findOne({where : {id:'9999'}})
+       return res.json(userId)
   } catch (error) {
-    console.log(error);
-    return res.status(500).send("test 중 에러");
+      console.log(error);
+      res.status(500).send('이미지 업데이트 실패')
   }
-};
+}
 
 const login = async (req, res) => {
   try {
@@ -52,7 +63,8 @@ const signup = async (req, res) => {
 };
 
 export default {
-  test,
   login,
   signup,
+  imgUpload,
+  update,
 };

models/user.model.js

@@ -25,7 +25,7 @@ const UserModel = (sequelize) => {
         type: DataTypes.STRING,
       },
       img: {
-        type: DataTypes.ARRAY(DataTypes.INTEGER),
+        type: DataTypes.STRING,
       },
       roomNumber: {
         type: DataTypes.ARRAY(DataTypes.STRING),

package.json

@@ -24,6 +24,7 @@
     "express": "4.17.1",
     "http": "0.0.1-security",
     "jsonwebtoken": "^8.5.1",
+    "multer": "^1.4.2",
     "nodemon": "^2.0.7",
     "pg": "^8.6.0",
     "pg-hstore": "^2.3.4",

routes/user.route.js

@@ -6,4 +6,7 @@ const router = express.Router();
 router.route("/login").post(userCtrl.login);
 router.route("/signup").post(userCtrl.signup);
 
+router.route("/profileimg")
+    .put(userCtrl.imgUpload, userCtrl.update)
+
 export default router;