240523 TIL

① 배운 것
flutter에서 dio와 retrofit을 이용해 multipart형식으로 파일 업로드 하는 방법
file vs multipartFile vs formData

//file : File 객체는 Dart의 표준 라이브러리에서 제공하는 파일 객체로, 
//파일 경로를 통해 파일을 읽거나 쓸 때 사용합니다. File 객체는 파일 자체를 나타냅니다.

import 'dart:io';

File file = File('path/to/your/file');

//multipartFile : MultipartFile 객체는 Dio 라이브러리에서 제공하는 파일 객체로, 
//HTTP 요청의 멀티파트 폼 데이터에서 파일을 나타낼 때 사용합니다. 
//이 객체는 파일을 업로드할 때, 파일의 이름, 콘텐츠 타입 등을 추가로 설정할 수 있습니다.

import 'package:dio/dio.dart';

MultipartFile multipartFile = await MultipartFile.fromFile(
  'path/to/your/file',
  filename: 'your_file_name',
);

//formData : FormData 객체는 HTTP 요청의 멀티파트 폼 데이터를 나타내며,
//파일뿐만 아니라 일반 필드도 함께 포함할 수 있습니다. 
//FormData는 주로 여러 필드와 파일을 함께 전송할 때 사용됩니다.

import 'package:dio/dio.dart';

FormData formData = FormData.fromMap({
  'field1': 'value1',
  'file': await MultipartFile.fromFile('path/to/your/file'),
});

MultipartFile은 파일 안에 파일 이름이나 콘텐츠 타입 등을 같이 넣을 수 있는 것이고, formData는 MultipartFile 형식을 포함하여 여러 데이터를 map으로 묶어서 보내는 것이다.

flutter에서는 MultipartFile을 사용해서 파일을 보낸다고 한다.
아래는 그 코드

 @PATCH('/세부주소')
  @MultiPart()
  Future<ImageResponse> patchUserProfile({
    @Part(name: 'age') required int age,
    //이런식으로 다른 필드도 @part 어노테이션으로 전송해야함 
    @Part(name: 'profile_img') required List<MultipartFile> userProfileImg, 
    // flutter retrofit에서는 List<MultipartFile> 타입만 지원한다. 
    //List<MultipartFile?>도 안되고 List<FormData>등도 안됨.
  });

  
    Future patchUserProfile({
    required MultipartFile userProfileImg,
    required int age,
  }) async {
    final result = await patchUserProfile(
        age: age,
        userProfileImg: [userProfileImg],
      );
  }
  //빈 파일인지 체크 하는 방법
  //if (userProfileImg.length == 0) 

// 포토피커에서 파일을 선택했을 때
   var multipartFile = MultipartFile.fromBytes(
        await file.readAsBytes(),
        filename: '프로필', //서버에서 정해주는 대로 파일이름 넣기
      );

	await patchUserProfile(userProfileImg: multipartFile);
}

// 포토피커에서 파일을 선택하지 않았을 때
await patchUserProfile(
          userProfileImg: MultipartFile.fromBytes(
            Uint8List.fromList([]),
          ),
        );

② 회고 (restropective)
원래 base64에서 formData로 변경하면 속도가 빨라진다했는데 별로 안빨라짐. 더 느려진 기분임.. (사진에 따라 다르지만 base64일때 2451ms이 나왔고 multipart일때는 1501ms가 나오는 경우도 있었고 2500ms 이상 나오는 경우도 있었음) 그래서 이미지를 서버에 업로드 완료 후 그 주소를 다시 받아서 유저에게 뿌려주는 것이 아니라, 서버에 업로드 완료 여부 상관없이 로컬에 가지고 있는 이미지를 유저에게 뿌려주는 것으로 변경해서 유저에게 업로드 속도가 빠른 것 처럼 보이게 함.

코드리뷰 피드백
1. 화살표형 함수
2. 중복되는 코드 변수로 빼기

③ 개선을 위한 방법
이 회사는 기획자가 명확히 있기 때문에 뭔가 기능적으로 수정 하고 싶으면 일단 기획자한테 물어보고 진행하자! 아니면 일을 두번 해야 할 수도 있음.