ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • React Native 파일 업로드 예제
    카테고리 없음 2019. 7. 28. 09:59

    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 ( .. 생략 .. );
    };
Designed by Monster Factory