fetch함수 다시 질문드립니다. 도와주세요.


(개유) #1

fetch함수를 이용해서 이미지를 업로드하고 있습니다.

현재 직면한 문제는 작성한 함수가 ios에서는 제대로 실행이되지만, android에서만 실행이 되지 않는다는 것입니다.

처음에는 특정 RN버전에서 오류인 것으로 판단되어 RN버전도 바꿔가며 Test해봣는데 소용이 없습니다. fetch함수가 아닌 axios를 사용 해봤으나 유사한 문제가 발생합니다. 조언을 얻어서 여러가지 시도를 해봤지만 도무지 해결책이 보이지 않습니다.

선배님들 도와주세요.

아래는 제가 사용하고 있는 test 함수입니다. 서버는 aws 엘라시틱빈스토크 서버를 사용하고 있습니다. 토큰도 포함되어 있습니다. 꼭 해결하고 싶습니다. 도와주세요

uploadImagetoServer() {
const data = new FormData();
data.append(‘file’, { //파일이름 file로 설정
uri : “https://upload.wikimedia.org/wikipedia/commons/c/c9/Moon.jpg”,
name : “testName.j”,
type: ‘file’
})
data.append(‘artist_nm’, ‘작가’)
data.append(‘artwork_nm’, ‘작품’)

return fetch(`http://ar-dev.ap-northeast-2.elasks`, {
  method: 'POST',
  body: data,
  headers:{
    Accept : "application/json",
    "Content-Type" : "multipart/form-data;",
    'Authorization': 'Bearer ' + "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7InVzZXJfaWQiOjYxLCJuaWNrbmFtZSI6InNraW4ybmlydiJ9LCJpYXQiOjE1NTk2MTM2MjQsImV4cCI6MTU2MDIxODQyNH0.Hp6ECPih_qSqcQUmAXeOwjXdxOThRRrvzDGLpF2EnT4",
  }
})
.then( response => {
  console.log(response)
})
.catch(error => {
  console.log(error)
})

}

오류의 내용은 다음과 같습니다

TypeError: Network request failed
at XMLHttpRequest.xhr.onerror (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504)
at XMLHttpRequest.dispatchEvent (C:\Users\yjn\Desktop\dev\versionTest\node_modules\event-target-shim\lib\event-target.js:172)
at XMLHttpRequest.setReadyState (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:580)
at XMLHttpRequest.__didCompleteResponse (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:394)
at C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\Network\XMLHttpRequest.js:507
at RCTDeviceEventEmitter.emit (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:181)
at MessageQueue.__callFunction (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366)
at C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106
at MessageQueue.__guard (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314)
at MessageQueue.callFunctionReturnFlushedQueue (C:\Users\yjn\Desktop\dev\versionTest\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105)


(이종은(Jong Lee)) #2

지난 번 글에 남긴 댓글에서처럼 다음 세가지 확인 해보세요.

  1. 서버로그
  2. 클라이언트 로그
  3. 네트워크 요청 열어보기

과거 React는 아니였지만 Android의 사진 업로드에서 자주 겪었던 문제는 다음과 같습니다.

  1. android 사진 해상도가 높다보니 서버의 업로드 제한 설정을 넘긴 경우
  2. Content type이 정상적으로 지정되지 않는 문제

(InGrowth) #3

프로토콜이 http인것이 원인이 아닌가 생각합니다.


(개유) #4

답변 모두 감사합니다.
문제를 해결했습니다.
원인은 formdata의 type 때문이었습니다.
ios의 경우 type을 알아서 설정해주는 것 같습니다. 그래서 문제가 되지 않았습니다.
type을 image/jpg라고 바꾸고
“Content-Type” : "multipart/form-data"로 변경하니 안드로이드에서도 제대로 실행되었습니다.


(Jeff Kang) #5

해결한 후기도 남겨주셔서 감사합니다. 비슷한 문제 생기면 참고할 수 있겠네요.