What I Want

react-native-image-crop-picker의 OpenCamera, OpenLibrary 등의 함수를 통해 로컬 이미지 정보들을 불러왔고 이미지들을 서버로 전송

How to Do

1. 이미지 객체를 폼데이터 객체에 담기
( 2. 폼데이터 객체를 서버로 전송 )

FormData?

• FromData란 ajax로 폼 전송을 가능하게 해주는 FormData 객체입니다.
• 주로 JSON 구조로 "KEY-VALUE" (키와 값) 구조로 데이터를 전송합니다.
• form전송이 필요한 경우가 있는데, 이미지를 ajax로 업로드할 때 필요합니다.
• 이미지는 base64, buffer, 2진 data 형식으로 서버로 전송해도 됩니다.
• 추천 방법은 input[type=file]을 사용해 form(폼)을 통해서 업로드를 하는 것 입니다.

보통, form을 제출하면 action 속성에 의해 지정한 페이지로 이동하면서 데이터를 전송합니다.
ajax는 반대로 제출 버튼을 누르면 기본 폼 동작은 e.preventDefault() 로 멈추고, 페이지 전환 없이 데이터를 전송합니다.
페이지 전환 없이 폼 데이터를 제출 하고 싶을 때 바로 FormData 객체를 사용합니다.

formData 객체에 이미지 넣기

formData의 append(key,value)를 통해 값을 넣으면 값은 문자열로 변환됩니다.
숫자를 넣어도 문자열이 되고, 배열을 넣어도 콤마로 구분한 문자열이 됩니다. 객체는 넣으면 무시가 됩니다.

전송할 파일이 여러개이므로 반복문을 통해 하나씩 append 합니다.
저의 코드는

 uploadData = async() =>  {
        // 폼데이터 생성
        var body = new FormData();
        // 현재 사용자가 불러온 이미지 리스트들 => 각각 폼데이터에 넣어준다.
        pictures.map( (picture,index) =>{
            var photo = {
                uri: picture.uri ,
                type: 'multipart/form-data',
                name: `${index}.jpg`
            }
            body.append('image',photo);
        })
	// 서버에게 전송
        axios.post('serverUrl',body,{
            headers: {'content-type': 'multipart/form-data'}
        })


    }

serverUrl은 나중에 서버에 연결할때 수정할 것이고 각각의 이미지 정보객체를 다듬는 photo 변수의 경우 uri,type,name이 모두 필요하다고 한다. 이 중 uri 정보만 제대로 되면 되지만 세가지 속성 중 하나라도 없다면 에러가 난다.