Flutter 서버에 이미지 업로드 - GlobalMediaBridge/cosmetic-server GitHub Wiki

플루터에서 카메라를 사용하는 또 다른 방법이 있다.

image_picker 플러그인을 사용하는 것이다.

이 플러그인은 앱 내부에서 카메라를 사용하는 것이 아닌 기기 자체의 카메라 앱에 연결만 해주게 된다.

image_picker 에서 버전을 확인하고 pubspec.yaml 에 추가해준다.

dependencies:

  image_picker: ^0.6.3+4

image_picker를 사용하면 카메라, 갤러리에서 이미지를 불러올 수 있다. 불러온 이미지는 변경될 수 있는 값이기 때문에 StatefulWidget을 만들어준다.

class 내부에서 불러온 이미지를 저장할 변수를 만들어준다.

File _image;

FloatingActionButton을 만들고 버튼이 눌렸을 때 이미지를 가져오는 함수를 실행하도록 한다. class내부에서 이미지를 가져오는 함수 getImage를 만들어준다.

이미지를 갤러리에서 가져온다던가 카메라로 찍은 이미지를 가져오는 행위는 오래걸리는 작업이다. 오래걸리는 작업을 처리하기 위해서는 Future의 도움을 받아야한다.

Future getImage() async {
    File image = await ImagePicker.pickImage(
        source: ImageSource.gallery);
    setState(() {
      _image = image;
    });
}

ImagePicker.pickImage 함수를 호출하면 이미지를 File형태로 불러올 수 있다. 이미지를 어디서 불러올 지에 대한 값으로 source를 파라미터로 넣어주어야 하는데 ImageSource.gallery 혹은 ImageSource.camera를 사용할 수 있다. 그렇게 불러온 image를 class의 _image에 넣어주면 된다.

이미지를 실제로 보여주고 싶다면 Image.file위젯을 사용해서 값을 전달해주면된다.

이렇게 불러온 이미지를 서버에 전송하기 위해서 dio라는 플러그인을 사용한다. dio 를 pubspec.yaml에 추가해준다.

dependencies:

  dio: ^3.0.9

이제 실제 서버와 통신하기 위해서 서버의 주소를 class안에 저장해둔다.

String url = 'http://ec2-13-125-153-38.ap-northeast-2.compute.amazonaws.com:5000';

이 주소는 aws에 임시로 열어둔 서버이다. 불러온 이미지를 선택하면 업로드 함수가 실행되도록 화면 탭이 감지되는 위젯으로 감싸준다.

GestureDetector(
  onTapUp: (TapUpDetails details) {
    uploadImage();
  },
  child: Image.file(_image))
Future<void> uploadImage() async {
  FormData formData = FormData.fromMap({
    "image": await MultipartFile.fromFile(_image.path,
        filename: '${DateTime.now()}.jpg'),
  });
  Dio dio = new Dio();
  Response response = await dio.post("$url/upload", data: formData);
  print(response);
}

해당 url주소로 이미지를 전송하는 함수이다.

⚠️ **GitHub.com Fallback** ⚠️