我无法将图像文件上传到服务器（Flutter-API）

Question

I made a form in my apps, but the image field didn't parse any image to server. I use image picker from gallery. This is my get image code from gallery:

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

and this is my body apps code with text field and image picker from gallery:

Padding(
                  padding: const EdgeInsets.only(top: 8.0),
                  child: new TextFormField(
                    maxLines: 3,
                    decoration: new InputDecoration(
                        labelText: "Keterangan"),
                    onSaved: (String val) => description = val,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: SizedBox(
                    width: 100.0,
                    height: 100.0,
                    child: RaisedButton(
                      child: _image == null
                          ? Icon(Icons.add_a_photo)
                          : Image.file(_image),
                      onPressed: () {
                        this.getImageFromGallery();
                      },
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 40.0),
                  child: RaisedButton(
                    child: Text("Submit"),
                    color: Colors.blue,
                    onPressed: () {
                      newPost();
                    },

And this is my newPost method :

void newPost() async {
    Map data = {
      "destination": destination,
      "start": start,
      "finish": finish,
      "person": person,
      "route": route,
      "descrption": description,
      "image": image
    };

    var body = json.encode(data);

    String token = await getToken();

    var response = await http.post('https://api-wisapedia.herokuapp.com/posts/',
        headers: {HttpHeaders.authorizationHeader: 'Bearer $token'},
        body: body);

    _newPostResponse =
        NewPostResponse.fromJson(json.decode(response.body.toString()));

    if (token != null) {
      if (destination.isEmpty ||
          start.isEmpty ||
          finish.isEmpty ||
          person.isEmpty ||
          route.isEmpty ||
          description.isEmpty ||
          image.isEmpty) {
        showDialog(
            builder: (context) => AlertDialog(
                  content: Text('Please fill the form'),
                  actions: <Widget>[
                    FlatButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: Text('OK'),
                    )
                  ],
                ),
            context: context);
      } else {
        _formkey.currentState.save();
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => MainScreen()));
      }
    } else {
      showDialog(
          builder: (context) => AlertDialog(
                content: Text('You need to authenticate'),
                actions: <Widget>[
                  FlatButton(
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text('$token'),
                  )
                ],
              ),
          context: context);
    }
  }

There is onSaved method in text field that makes values of this field can be uploaded by API, but there isn't onSaved method for image. I'm confused is : Image.file(_image) have a same role as onSaved or not? Then when I run this code, I don't know why but the image non uploaded. how can I solve this problem?

Answer 1

I think you should await your function, since it's returning a Future. Something like this:

onPressed: () async {
  await this.getImageFromGallery();
},