프론트엔드 개발자의 TIL #011

TIL #011

191116 토

 

---

오늘 배운 점

<Flutter>

1. 다중 이미지 업로드

• multi_image_picker 패키지를 활용한 다중 이미지 업로드 기능을 구현하였다.

import 'package:multi_image_picker/multi_image_picker.dart';

void upload() async {//선택한 이미지 POST로 업로드
    var i = 0;
    var uri = Uri.parse(Global.serverUrl + '/updateImg_test');
    http.MultipartRequest request = http.MultipartRequest('POST', uri);
    for (var asset in images) {
      i++;
      var multipartFile = http.MultipartFile.fromBytes('photo',
      (await asset.getByteData()).buffer.asUint8List(),
      filename: 'photo$i.jpg',
      contentType: MediaType("image", "jpg"),
      );
      request.files.add(multipartFile);
    }
    request.headers.addAll(headers);
    
    var response = await request.send();
    print(response.statusCode);
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });
  }

Future<void> loadAssets() async {//이미지 로드
	setState(() {
    	images = List<Asset>();
    });

    List<Asset> resultList = List<Asset>();
    String error;

    try{
    	resultList = await MultiImagePicker.pickImages(
        	maxImages: 3,
        	enableCamera: true,
        	selectedAssets: images,
        	cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        	materialOptions: MaterialOptions(
          		allViewTitle: "All Photos",
          		useDetailsView: false,
        	),
      	);

      for (var r in resultList) {
          var t = await r.filePath;
          print(t);
      }
    } on Exception catch (e) {
      error = e.toString();
    }
    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
    });
  }

SliverGrid.count(//선택한 이미지 grid 형태로 미리보기
	children: List.generate(images.length, (index) {
    Asset asset = images[index];
    return AssetThumb(
    	asset: asset,
        width: 300,
        height: 300,
        );
	},
    ),
    crossAxisCount: 3,
),

 

2. 게시물 업로드 기능 구현 시작

• 이미지 및 간단한 캡션 테스트를 입력하고 업로드하는 기능을 작업중이다.

<Devfest>

그리고 학교에서 진행된 DevFest에 다녀왔는데 이 내용은 서비스 개발과는 무관해서 개인 블로그에만 올려두겠다!

---

내일 배울 점

1. 게시물 작성 기능 에러 해결

2. 프로필 설정 화면 만들기

3. 과제, 과제, 과제....

 

---

- 과제 너무 많다 하기 싫다...

- 그새 TIL 10개 돌파!