소개
게시글
질문&답변
2022.05.20
이미지 로딩 오류(ERR_SSL_PROTOCOL_ERROR)
강의 처음부터 따라서 다시 작성하고 다른 분들의 글을 보면서 해결했습니다 참고한 글 : https://www.inflearn.com/questions/445195 Client - FileUpload.js import React , { useState } from "react" ; import Dropzone from "react-dropzone" ; import { PlusOutlined } from "@ant-design/icons" ; import axios from "axios" ; function FileUpload () { const [ Images , setImages ] = useState ([]); const dropHandler = ( files ) => { let formData = new FormData (); const config = { header : { "content-type" : "multipart/fomr-data" }, }; formData . append ( "file" , files [ 0 ]); axios . post ( "/api/product/image" , formData , config ) . then (( response ) => { if ( response . data . success ) { console . log ( response . data ); setImages ([... Images , response . data . filePath ]); } else { alert ( "파일을 저장하는데 실패했습니다." ); } }); }; return ( div style = { { display : "flex" , justifyContent : "space-between" } } > Dropzone onDrop = { dropHandler } > { ({ getRootProps , getInputProps }) => ( section > div style = { { width : 300 , height : 240 , border : "1px solid lightgray" , display : "flex" , alignItems : "center" , justifyContent : "center" , } } { ... getRootProps () } > input { ... getInputProps () } /> PlusOutlined style = { { fontSize : "3rem" , display : "flex" , alignSelf : "center" , } } /> div > section > ) } Dropzone > div style = { { display : "flex" , width : "350px" , height : "240px" , overflowX : "scroll" , } } > { Images . map (( image , index ) => { return ( div key = { index } > img style = { { minWidth : "300px" , width : "300px" , height : "240px" } } src = { `http://localhost:5000/ ${ image } ` } /> div > ); }) } div > div > ); } export default FileUpload ; Server - index.js app . use ( "/api/product" , require ( "./routes/product" )); app . use ( "/uploads" , express . static ( "uploads" )); - routes/product const express = require ( "express" ); const router = express . Router (); const multer = require ( "multer" ); var storage = multer . diskStorage ({ destination : function ( req , file , cb ) { cb ( null , "uploads/" ); }, filename : function ( req , file , cb ) { cb ( null , ` ${ Date . now () } _ ${ file . originalname } ` ); }, }); var upload = multer ({ storage : storage }). single ( "file" ); router . post ( "/image" , ( req , res ) => { // 가져온 이미지를 저장을 해주면 된다. upload ( req , res , ( err ) => { if ( err ) { return req . json ({ success : false , err }); } return res . json ({ success : true , filePath : res . req . file . path , fileName : res . req . file . filename , }); }); }); module . exports = router ;
- 0
- 2
- 3.1K
질문&답변
2022.05.12
prop.history.push('/')가 작동이 안되시는 분들 참고하세요
감사합니다 덕분에 해결할 수 있었습니다. 저는 이런 식으로 고쳤습니다. import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { registerUser } from "../../../_action/user_action"; import { useNavigate } from "react-router-dom"; function RegisterPage(props) { const dispatch = useDispatch(); const navigate = useNavigate(); const [Email, setEmail] = useState(""); const [Name, setName] = useState(""); const [Password, setPassword] = useState(""); const [ConfirmPassword, setConfirmPassword] = useState(""); const onEmailHandler = (event) => { setEmail(event.currentTarget.value); }; const onNameHandler = (event) => { setName(event.currentTarget.value); }; const onPasswordHandler = (event) => { setPassword(event.currentTarget.value); }; const onConfirmPasswordHandler = (event) => { setConfirmPassword(event.currentTarget.value); }; const onSubmitHandler = (event) => { event.preventDefault(); if (Password !== ConfirmPassword) { return alert("비밀번호와 비밀번호 확인은 같아야 합니다."); } let body = { email: Email, password: Password, name: Name, }; dispatch(registerUser(body)).then((response) => { if (response.payload.success) { alert("회원가입이 완료되었습니다."); navigate("/login"); } else { alert("회원가입 중 오류가 발생했습니다."); } }); }; return ( Email Name Password Confirm Password 회원 가입 ); } export default RegisterPage;
- 5
- 1
- 789