728x90
https://stepby-yun.tistory.com/181
지난시간,,,
바디파서 해봐도 (express로 사용) 안되고 무한히 헤매었다
한번에 저장안하고 따로 할까 싶어서 마이페이지 만들어서 뺐다가
생각해보니 해당 id에 프로필을 저장하는거라서 더 복잡해지겠다 싶었다(프로필 수정도 만들 때 그거 해야겠지만..)
어쨌든 같은 데이터 행에 넣어줘야하니까.
방법은 여러가지 있겠지만 내가 찾은 거는
formdata.append로 아이디랑 유저도 저장하는 방법이었다.
(method) FormData.append(name: string, value: string | Blob, fileName?: string): void
append(키, 값)
이란 거는 알았는데 multer쓰면서
upload.single(키) 값과 같아야된대서
이미지 아닌 아이디와 비번은 좀 다른 줄 알았다. (multer사용한 이미지는 req.body로 가져오는 것도 아니어서 좀 실제로 다르기도 함)
해당하는 키값을
req.body.키값
으로 찍어보니 나왔다.
req.body가 잘나오는게 append로 넣어줘서 그런건가..?
(바디파서 빼봐도 잘나옴)
req만 콘솔로 찍어보니 엄청 길게 나오는데 그중에 body랑 file이 보이네
react 프론트 코드
import React, { useState } from "react";
import Axios from "axios";
import "./signup.css";
function Signup() {
//회원가입 값
const [id, setId] = useState("");
const [password, setPassword] = useState("");
// const [imageUpload, setImageUpload] = useState(null);
const [image, setImage] = useState({
preview:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAM1BMVEXk5ueutLfn6eqrsbTp6+zg4uOwtrnJzc/j5earsbW0uby4vcDQ09XGyszU19jd3+G/xMamCvwDAAAFLklEQVR4nO2d2bLbIAxAbYE3sDH//7WFbPfexG4MiCAcnWmnrzkjIRaD2jQMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMw5wQkHJczewxZh2lhNK/CBOQo1n0JIT74/H/qMV0Z7GU3aCcVPuEE1XDCtVLAhgtpme7H0s1N1U7QjO0L8F7llzGeh1hEG/8Lo7TUmmuSrOfns9xnGXpXxsONPpA/B6OqqstjC6Ax/0ujkNdYQQbKNi2k64qiiEZ+ohi35X+2YcZw/WujmslYewiAliVYrxgJYrdwUmwXsU+RdApUi83oNIE27YvrfB/ZPg8+BJETXnqh9CVzBbTQHgojgiCvtqU9thFJg/CKz3VIMKMEkIXxIWqIpIg2SkjYj+xC816mrJae2aiWGykxRNsW0UwiJghJDljYI5CD8GRiCtIsJxizYUPQ2pzItZy5pcisTRdk/a9m4amtNNfBuQkdVhSaYqfpNTSFGfb9GRIakrE2Pm+GFLaCQPqiu0OpWP+HMPQQcgQMiQprWXNmsVwIjQjYi/ZrhAqNTCgr2gu0Jnz85RSSjso0HkMFZ0YZjKkc26a/jlmh9JiDyDxi9oeorTYAzZkwwoMz19pzj9bnH/GP/+qbchjSGflneWYhtTuKdMOmNKZcJ5TjInQKcYXnESd/jQxy0ENpULTNGOGgxpap/oyw9pbUAqhfx2Dbkhovvfgz4iUzoM9+GlK6/Mh4q29hyC1mwro30hpVVLPF9wYQr71RazOeM5/cw81iBRD+A03aM9/C/obbrKjbYSpCmIVG3qT/Q8oeUo3Rz0IL7vI1tEbCB9pSiu8I/aV8x3Kg/BGWrWp4ZVs0nZfmAoEG4h/61yHYIJiFSl6Q0Vk6tTW1N8kYp8hdOkfHYYMXd2Qft+8CYwqYDSKvqIh+MCF8Wgca2u/cwdgeW3TtuVn6+1oBs3yLo5C2JpK6CvQzGpfUkz9UG/87gCsi5o2LIXolxN0FbwAsjOLEr+YJmXn7iR6N0BCt5p5cMxm7eAsfS+/CACQf4CTpKjzgkvr2cVarVTf96372yut7XLJ1sa7lv6VcfgYrWaxqr3Wlo1S6pvStr22sxOtTNPLzdY3nj20bPP+ejFdJYkLsjGLdtPBEbe/mr2bQKiXWJDroA+vtzc0p9aahuwqHMDYrQEXHEw9jwQl3drMpts9JBU1SdktPe5FBRdJQ6bwXBpa57ib2A8kukQDzMjh++Uo7Fo6Wd02Pkf4fknqoo4HtvAIjsqUcjx6DIPgWCaOML9rKI/oqD9/lgNrn+eF+p7j8tnzHBiR7+kdUGw/+V1Kzkc75mMy6U+FMaxjPibiM1U1uGM+puInHpmALZCgP4pt7i840MV8+0R1zPsRB6UTcqpizncYwZ89syDydfyWCwXB1l8/zRNGWbTG/GHKUm9AkxHMc/EGSk3z2+ArEhPEV5TUBLEvUGFcjEUH80J/jveTGOAJEljJbILWGQT3zRYiwuKsUXN1EEJAzBhRJFll7mBUG7KD8EqPkKekBREaL8hMDZLQSG6AQjtHPYmvTQnX0TtpC1SYCe2YdkkyLP3jj5BSbKiuR585eQhTgoje6yIb0Yb0C+mV6EYvebqw5SDy2WmubogZiF2AVxPC2FpDf8H2Q9QWo6IkjUxTWVEI3WY/wrCeSuqJ+eRWzXR/JXwgVjUMozbCOfoEZiSiKVGepqv5CJ8RyR4D7xBeamqa7z3BJ/z17JxuBPdv93d/a2Ki878MMAzDMAzDMAzDMAzDMF/KP09VUmxBAiI3AAAAAElFTkSuQmCC",
data: "",
// Headers: " 'Content-Type': 'multipart/form-data'",
});
//다 userlist에 담아서 db저장하기
// const [userList, setUserList] = useState([]);
const onChangeId = (event) => {
setId(event.target.value);
};
const onChagePassword = (event) => {
setPassword(event.target.value);
};
const Submit = (e) => {
e.preventDefault();
let formData = new FormData();
formData.append("file", image.data);
formData.append("iddd", id);
formData.append("password", password);
console.log(image.data, "선택한이미지! ");
console.log(formData, "들어가기전폼데이터");
Axios.post(
"http://localhost:3001/submit",
// {
// id: id,
// password: password,
// },
formData,
{
headers: {
"Content-Type": "multipart/form-data",
},
}
).then(() =>
console.log(
formData,
"then이후 폼데이터",
image,
"이건뭐",
image.data,
"이미지데이터"
)
);
};
const handleFileChange = (e) => {
const img = {
preview: URL.createObjectURL(e.target.files[0]),
data: e.target.files[0],
};
setImage(img);
};
return (
<div className="formBox">
<div className="signup_id">
<input placeholder="아이디" onChange={onChangeId}></input>
</div>
<div className="signup_password">
<input placeholder="비밀번호" onChange={onChagePassword}></input>
</div>
<div>
<input placeholder="비밀번호 확인"></input>
</div>
{image.preview && <img src={image.preview} width="100" height="100" />}
<input
type="file"
onChange={handleFileChange}
name="Images"
accept="Images/*"
/>
<button onClick={Submit}>제출</button>
</div>
);
}
export default Signup;
백 코드
const express = require("express");
const app = express();
const mysql = require("mysql");
const cors = require("cors");
const multer = require("multer");
const path = require("path");
app.use(cors());
//이거 필요한거임?
// app.use(express.static("Images"));
const db = mysql.createConnection({
user: "*",
host: "*",
password: "*",
database: "*",
});
///////
const upload = multer({
storage: multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "Images/");
},
filename: function (req, file, cb) {
cb(null, new Date().valueOf() + path.extname(file.originalname));
},
}),
});
app.post("/submit", upload.single("file"), (req, res) => {
// console.log(req.body.posts, "레큐바디");
console.log(JSON.stringify(req.body), "JSON.stringify(req.body)");
console.log(req.body, "바디");
const profile = req.file.path;
const id = req.body.iddd;
const password = req.body.password;
console.log(id, password, "아이디랑 패스워드");
console.log(req.file, "파일");
console.log(profile, "프로파일");
console.log(profile, "프로필 들어갈 정보");
db.query(
"INSERT INTO userlist (userId,userPassword,userProfile) VALUES (?,?,?) ",
[id, password, profile],
(err, result) => {
if (err) {
console.log(err, "실패ㅠㅠㅠ");
} else {
res.send("userlist values inserted");
// console.log("성공~");
}
}
);
});
app.listen(3001, () => {
console.log("your server is running on 3001~! yeah");
});
이제
유효성검사
비밀번호 암호화 해봐야지..
아 그전에 데이터 삭제부터하자
728x90
'노드 node.js' 카테고리의 다른 글
| nodejs 가 뭐야? (feat. express) (0) | 2023.02.19 |
|---|---|
| axios 와 fetch 차이 (0) | 2022.05.03 |
| bodyParser써야하는 이유 (0) | 2022.05.02 |
| formData 이미지데이터 보내고 받기 (react,nodejs,header) (0) | 2022.04.28 |
| 회원가입 프로필 이미지 넣고 보이게 하기/닉네임,비밀번호 변경 (0) | 2021.10.08 |
