React Native 파일 업로드 예제

React Native에서는 Axios를 활용하여 Node.js 서버로 파일을 전송할 수 있다.

 

일단 Server에 아래와 같이 파일 업로드를 위한 페이지를 생성한다.

Clien가 /api/upload 페이지에 post 메시지를 uploadMiddleware, uploadController를 인자로 요청하면,

// Server.js

server.express.post("/api/upload", uploadMiddleware, uploadController);

 

Upload 페이지는 uploadMiddleware가 호출되고 client로부터 전달받은 데이터 중 "file"이라는 이름을 가진 파일을

uploads/ 폴더에 저장한다.

 

uploadController는 req 에서 서버에 저장된 file 정보(위치/파일명)를 추출하여 리턴한다. 

// Upload.js

import multer from "multer";

const upload = multer({ dest: "uploads/" });
export const uploadMiddleware = upload.single("file");

export const uploadController = (req, res) => {
  const {
    file: { path }
  } = req;
  res.json({ path });
};

Client 코드는 아래와 같이 작성한다.

axios.post를 통해 서버에 파일과 업로드 요청을 post 로 전달한다.

 

이때 주의할 점은 iOS에서는 formData의 tyep을 'jpg'라고 입력해도 정상적으로 동작하지만,

Android에서는 반드시 'image/jpeg'로 작성해야만 한다!! (이것때문에 하루 날려먹음)

 

또한 iOS emulator에서는 서버(테스트용)의 주소를 'localhost'로 작성해도 정상적으로 서버에 접속이 되지만,

Android emulator는 반드시 실제 IP 주소를 작성해야만 정상적으로 메시지를 수신할 수 있다. 

// Client.js

export default ({ navigation }) => {
  const photo = navigation.getParam("photo");

  const handleSubmit = async () => {
    const formData = new FormData();
    const name = photo.filename;
    const [, type] = name.split(".");
    formData.append("file", {
      name,
      type: "image/jpeg",
      uri: photo.uri
    });
    try {
      const {
        data: { path }
      } = await axios.post("http://192.168.0.27:4000/api/upload", formData, {
        headers: {
          "content-type": "multipart/form-data"
        }
      });
    } catch (e) {
      Alert.alert("Cant upload", "Try later");
    }
  };
  return ( .. 생략 .. );
};