Как опубликовать файл изображения в API узла из приложения флаттера - PullRequest
0 голосов
/ 05 февраля 2020

Вот скриншот запроса Post, который я сделал в API моего узла с помощью почтальона

Я занимаюсь разработкой приложения для регистрации пользователей и пытаюсь опубликовать файл изображения, который выбрал использование плагина flutter image_picker для моего API узла из моего приложения флаттера. Я выбрал изображение из галереи на одном экране и отправил на другой экран.

    File imageFile;

    _openGallery(BuildContext context) async{

    var picture = await ImagePicker.pickImage(source: ImageSource.gallery);
    if(picture != null){
    File croppedFile = await ImageCropper.cropImage(
    sourcePath: picture.path,
    aspectRatioPresets: Platform.isAndroid
    ?[
              CropAspectRatioPreset.square,
              CropAspectRatioPreset.ratio3x2,
              CropAspectRatioPreset.original,
              CropAspectRatioPreset.ratio4x3,
              CropAspectRatioPreset.ratio16x9
    ]
    :[
      CropAspectRatioPreset.original,
              CropAspectRatioPreset.square,
              CropAspectRatioPreset.ratio3x2,
              CropAspectRatioPreset.ratio4x3,
              CropAspectRatioPreset.ratio5x3,
              CropAspectRatioPreset.ratio5x4,
              CropAspectRatioPreset.ratio7x5,
              CropAspectRatioPreset.ratio16x9
    ],

    androidUiSettings: AndroidUiSettings(
         toolbarTitle: 'Crop Your photo',
          toolbarColor: Color(0xFFFF9006),
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false),
    );

    this.setState((){
          //  imageFile = croppedFile;
           imageFile = croppedFile;

    });
    Navigator.of(context).pop();
    _showImg();
}

Я передал файл изображения на следующий экран, используя маршрутизатор страницы материала

Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => SetupStepTwo(imageFile: imageFile)));

Вот мой код следующей страницы, связанный с этим изображением

    final File imageFile;

    SetupStepTwo(
      {Key key,this.imageFile,}) : super(key: key);

                      onTap{

                         if (otpcheckNull()) {

                            File _file = widget.imageFile;

                            final body = {
                              "name": widget.otpName,
                              "gender": widget.gender,
                              "bday": widget.bday,
                              "email": widget.email,
                              "phone": widget.phone,
                              "profileImage": _file,
                            };

                            RegisterUserService.RegisterUser(body)
                                .then((success) {
                              if (success) {
                                Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => Homepage()));
                              }
                            });
                          } 
                           else {
                               errorCheckDialog();
                               }

   }

А вот мой код реализации вызова Api

class RegisterUserService {
  static Future<bool> RegisterUser(body) async {

    final response =
        await http.post('http://morning-fortress-69187.herokuapp.com/api/user/register', body: jsonEncode(body));

    var data = response.body;
    print(body);
    print(json.decode(data));

    Map<String, dynamic> res_data = jsonDecode(data);
    log(res_data['loginstatus']);
    if (res_data['loginstatus'] == 'olduser') {
      return true;
    } else {
      return false;
    }
    // return false;
  }
}

Это дает мне эту ошибку

E/flutter (15655): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: Converting object to an encodable object failed: Instance of '_File'
E/flutter (15655): #0      _JsonStringifier.writeObject  (dart:convert/json.dart:649:7)
E/flutter (15655): #1      _JsonStringifier.writeMap  (dart:convert/json.dart:730:7)
E/flutter (15655): #2      _JsonStringifier.writeJsonValue  (dart:convert/json.dart:685:21)
E/flutter (15655): #3      _JsonStringifier.writeObject  (dart:convert/json.dart:640:9)
E/flutter (15655): #4      _JsonStringStringifier.printOn  (dart:convert/json.dart:836:17)
E/flutter (15655): #5      _JsonStringStringifier.stringify  (dart:convert/json.dart:821:5)
E/flutter (15655): #6      JsonEncoder.convert  (dart:convert/json.dart:257:30)
E/flutter (15655): #7      JsonCodec.encode  (dart:convert/json.dart:168:45)
E/flutter (15655): #8      jsonEncode  (dart:convert/json.dart:82:10)
E/flutter (15655): #9      RegisterUserService.RegisterUser 
package:folk/…/ApiServices/RegisterNewUser.dart:15
E/flutter (15655): #10     _GetLocationState.build.<anonymous closure> 
package:folk/…/Login/location.dart:190
E/flutter (15655): #11     _InkResponseState._handleTap 
package:flutter/…/material/ink_well.dart:706
E/flutter (15655): #12     _InkResponseState.build.<anonymous closure> 
package:flutter/…/material/ink_well.dart:789
E/flutter (15655): #13     GestureRecognizer.invokeCallback 
package:flutter/…/gestures/recognizer.dart:182
E/flutter (15655): #14     TapGestureRecognizer.handleTapUp 
package:flutter/…/gestures/tap.dart:486
E/flutter (15655): #15     BaseTapGestureRecognizer._checkUp 
package:flutter/…/gestures/tap.dart:264
E/flutter (15655): #16     BaseTapGestureRecognizer.handlePrimaryPointer 
package:flutter/…/gestures/tap.dart:199
E/flutter (15655): #17     PrimaryPointerGestureRecognizer.handleEvent 
package:flutter/…/gestures/recognizer.dart:467
E/flutter (15655): #18     PointerRouter._dispatch 
package:flutter/…/gestures/pointer_router.dart:76
E/flutter (15655): #19     PointerRouter._dispatchEventToRoutes.<anonymous closure> 
package:flutter/…/gestures/pointer_router.dart:117
E/flutter (15655): #20     _LinkedHashMapMixin.forEach  (dart:collection-patch/compact_hash.dart:379:8)
E/flutter (15655): #21     PointerRouter._dispatchEventToRoutes 
package:flutter/…/gestures/pointer_router.dart:115
E/flutter (15655): #22     PointerRouter.route 
package:flutter/…/gestures/pointer_router.dart:101
E/flutter (15655): #23     GestureBinding.handleEvent 
package:flutter/…/gestures/binding.dart:218
E/flutter (15655): #24     GestureBinding.dispatchEvent 
package:flutter/…/gestures/binding.dart:198
E/flutter (15655): #25     GestureBinding._handlePointerEvent 
package:flutter/…/gestures/binding.dart:156
E/flutter (15655): #26     GestureBinding._flushPointerEventQueue 
package:flutter/…/gestures/binding.dart:102
E/flutter (15655): #27     GestureBinding._handlePointerDataPacket 
package:flutter/…/gestures/binding.dart:86
E/flutter (15655): #28     _rootRunUnary  (dart:async/zone.dart:1138:13)
E/flutter (15655): #29     _CustomZone.runUnary  (dart:async/zone.dart:1031:19)
E/flutter (15655): #30     _CustomZone.runUnaryGuarded  (dart:async/zone.dart:933:7)
E/flutter (15655): #31     _invoke1  (dart:ui/hooks.dart:273:10)
E/flutter (15655): #32     _dispatchPointerDataPacket  (dart:ui/hooks.dart:182:5)

скриншот ошибки

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 05 февраля 2020

Кажется, ваша конечная точка API в "user / register" получает только имя в параметре profileImage тела. Поскольку файлы и изображения являются двоичными данными, я предлагаю, чтобы при объявлении тела вы делали так:

   final body = {             "name": widget.otpName,
                          "gender": widget.gender,
                          "bday": widget.bday,
                          "email": widget.email,
                          "phone": widget.phone,
                          "profileImage": base64Encode(_file.readAsBytesSync())                          }; 

таким образом json .encode получает строку вместо файла, которую он знает, как кодировать. И вам сейчас нужно декодировать строку base 64, полученную в теле сообщения в вашем бэкэнде.

...