[05]SocialGallery Project

Upload

1) Upload Form
Toggle 사용해서 background는 어둡게 css적용

(open Btn)
function openPop() {
document.getElementById("popup_layer").style.display = "block";
}

(close Btn)
function closePop() {
document.getElementById("popup_layer").style.display = "none";
}

2) 파일 미리보기
파일 미리보기는 DB에서 URL을 받아와 이미지를 다시 서버에 요청 후 뿌려주는 방식이 아닌 내 local 내 주소를 가져와서 보여주는 방식 사용
onChange Event를 걸어서 script를 불러온다 했을때 img 파일을 가져와 files[0]를 가져온 후 FileReader의 readAsDataURL을 통해 URL을 읽어 들어온다. redear에 onload를 걸어 reader를 불러올시 img src를 url로 지정해준다.

const insertImg = (e) => {
let reader = new FileReader()

if(e.target.files[0]) {
		reader.readAsDataURL(e.target.files[0])
		setImgs(e.target.files[0])
		console.log(e.target.files[0])
}

reader.onloadend = () => {
const previewImgUrl = reader.result

if(previewImgUrl) {
		setPreviewImg([...previewImg, previewImgUrl])
			}
		}
}

<input type="file" id="file" name="files" onChange={(e)=>{insertImg(e)}}/>

실행화면

3) Server로 전송
Form을 전송할때 HTTP 메시지의 Content-Type 속성은 multipart/form-data이며 메시지는 인코딩되어 전송.
FormData로 이미지를 ajax로 업로드함

const postSubmit = (e) => {
		e.preventDefault();
		const headers = {
		'Content-type': 'multipart/form-data',
		'Authorization': "Bearer " + localStorage.getItem("token")
}

const formData = new FormData()
		formData.append('files', imgs)
		formData.append('email', localStorage.getItem('user'))
		formData.append('title', title)
		formData.append('content', content)
		console.log("이미지 " + formData.get("files").name)
		console.log("EMAIL" + formData.get("email"))
		console.log("TITLE" + formData.get("title"))
		console.log("content" + formData.get("content"))
		axios.defaults.headers.post = null
		axios.post('url',formData, {headers})
		.then(res=>{
		console.log(res)
})
}

e.currentTarget.value로 Title과 comments를 서버에 전송하고 e.target.files[0]를 통해 이미지를 전송

const handleImgFile = (e) => {
		let file = e.target.files[0]
		setImages(file)
}
const onHandlePostTitle = (e) =>{
		setTitle(e.currentTarget.value)
}
const onHandlePostComments = (e) =>{
		setContent(e.currentTarget.value)
}

---

Upload category 기능 추가

1) UI

2) 카테고리 서버로 전송

//서버로 카테고리 전송

## upLoadForm.jsx
    const postSubmit = (e) => {
        
        e.preventDefault();
        const headers = {
            'Content-type': 'multipart/form-data',
            'Authorization': "Bearer " + localStorage.getItem("token")
        }
        const formData = new FormData()
        formData.append('files', imgs)
        formData.append('usersId', localStorage.getItem('uid'))
        formData.append('title', title)
        formData.append('content', content)
        formData.append('category', category)

        axios.defaults.headers.post = null
        axios.post('http://localhost:8080/api/post/upload',formData, {headers})
            .then(()=>{
                window.location.reload()
            })
    }

// 카테고리 버튼 전송

## upLoadForm.jsx
    const onHandleCategory = (e)=>{
        setCategory(e.target.value)
    }

//Input Form

## upLoadForm.jsx
 <div className="photoinfo_category" onChange={onHandleCategory}>
   <input  type='radio' name='category' value='BROADCAST'/>&nbsp;영화/드라마<br></br>
   <input className="category_radio"type='radio' name='category' value='LIFE' />&nbsp;연예/방송<br></br>
   <input className="category_radio"type='radio' name='category' value='MOVIE'/>&nbsp;취미/생활<br></br>
   <input className="category_radio"type='radio' name='category' value='TRAVEL' />&nbsp;여행/음식<br></br>
 </div>

3) DB 저장

---