1. axios로 multipart와 json데이터 보내기.

 

 

리액트에서 스프링 부트에 데이터를 보내려면 Axios.post로 보내게 된다.  

상품이미지와 상품 정보들(타이틀,설명,글쓴이)을  코드로 표현하면 이렇다.

 

    <form onSubmit={SubmitHandler}>
        <h1>Product Upload</h1>

        <label for="title">Title</label>
        <input type="text" onChange={TitleHandler} />

        <label for="image">Image</label>
        <input type="file" id="file"  />

        <label for="content">Content</label>
        <input type="text" onChange={ContentHandler} />

        <label for="writer">Writer</label>
        <input type="text" onChange={WriterHandler} />

        <button type="submit" onClick={SubmitHandler}>Upload</button>
      </form>

 

 

사용자가 정보를 입력하면 useState에 저장할 수 있게 핸들러를 등록해 놓았다.

 

 

 	
    //정보를 저장할 useState 명시
    
    const [title, setTitle] = useState("");
    const [content, setContent] = useState("")
    const [writer, setWriter] = useState("")
    
    
    //핸들러 
    const TitleHandler = (event) => {
        setTitle(event.currentTarget.value)
    };

    const ContentHandler = (event) => {
        setContent(event.currentTarget.value)
    };
    const WriterHandler = (event) => {
        setWriter(event.currentTarget.value)
    };
   

	// form을 제출할때, 실행될 서브밋 핸들러
    const SubmitHandler= (event) => {

        event.preventDefault();

      	//백에 보낼 데이터를 객체 형식으로 만듦.
        const dataObj = {
            title:title,
            content:content,
            writer:writer
        }
		
        // 그 후, 객체를 JSON 형태로 변환
        var DataObject = JSON.stringify(dataObj);
        
        //JSON을 Blob으로 변환. Multipart/Data인 이미지를 같이 전달하는데 
        //컨텐츠 유형 설정이 필요함. 컨텐츠 유형 설정하려면, 파일류 객체를 전달해야함. 
        // Blob이용해 만들 수 있음. BLOB == Binary large object, 이미지같은 하나의 거대한 파일
        var Product = new Blob([DataObject],{
            type: 'application/json'
        })

        //formData 객체 생성하여, 이미지와 Blob 이어 붙이기.
        var formData = new FormData();
        
        var images = document.querySelector("#file");
        formData.append("images",images.files[0]);
        formData.append("Product",Product);


		//본격적으로 axios로 보낼차례.
        axios.post('/api/images',formData)
            .then(response => {
                if(response.status === 200){
                    console.log(response.data)
                    alert('success')  
                  // navigator({ pathname: '/' })
                }else{
                    console.log('errrrrer');                    
                }
            } 
                )
    }

axios.post로 데이터를 보낼때 일단 첫번째로 1. text 데이터들은 Object로  만든 후, JSON으로 변환한다 2. 이미지 파일과 같이 백으로 보내야하기 때문에, 콘텐츠 타입 설정 필요하다. Blob 타입으로 콘텐츠 타입 설정가능.3. FormData로 axios에 보내야하기 때문에, FormData객체 만든 후,  append한다.

 

 

OBJECT - JSON - BLOB - FORMDATA.APPEND - AXIOS