[Flutter] 플러터 웹 파일 업로드 구현하기


FilePicker 패키지를 통해 File 업로드를 구현할 수 있겠지만 FilePicker는 일반 html의 파일업로드하기 버튼이 라인 위젯에서도 보이는 이슈를 보이고 있다,
하지만 FileUploadInputElement 를 통해 해당 문제를 해결하고 구현을 할 수 있으며 FilePicker 패키지를 사용하지 않아 프로젝트의 용량 및 성능을 높일 수 있다.

FileUploadInputElement 공식문서

final FileUploadInputElement input = FileUploadInputElement();
              input..accept = '.png,.jpg,.jpeg'; /// 확장자 설정
              input.click();    
              input.onChange.listen((event) {
                File file = input.files.first;
                print("이름 : ${file.name}");
                print("타입 : ${file.type}");
                print("?? : ${file.relativePath}");
                print("시간 : ${file.lastModifiedDate}");
                print("사이즈 : ${file.size}");                     
              });

이미지 띄우기 방법은 먼저 FileReader 객체를 생성 후 readAsDataUrl 함수의 매개 변수로 파일을 넣어준 다음에 reader.onLoadEnd.listen안에서 Base64Decoder 클래스를 통해 변환하면 된다.

/// Uint8List로 변환
final FileUploadInputElement input = FileUploadInputElement();
              input..accept = '.png,.jpg,.jpeg';
              input.click();
              input.onChange.listen((event) {
                File file = input.files.first;
                print("이름 : ${file.name}");
                print("타입 : ${file.type}");
                print("?? : ${file.relativePath}");
                print("시간 : ${file.lastModifiedDate}");
                print("사이즈 : ${file.size}");
                final reader = FileReader();
                reader.onLoadEnd.listen((_) {
                  setState(() {
                    [변수] = Base64Decoder().convert(reader.result.toString().split(",").last);
                  });
                });
                reader.readAsDataUrl(file);        
              });

답글 남기기

이메일 주소는 공개되지 않습니다.