如何在flutter中将图像作为base64字符串发布到api服务器

如何解决如何在flutter中将图像作为base64字符串发布到api服务器

我创建了一个 PickImages 类，它可以从相机和图库中获取图像，如下所示。现在我想将图像作为 base64 字符串发布到 json api 服务器。

这是 PickImages 类。

import 'dart:convert';
import 'dart:developer';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
//import 'services/services.dart';

class PickImages extends StatefulWidget {
  @override
  _PickImagesState createState() => _PickImagesState();
}

class _PickImagesState extends State<PickImages> {
  List<Object> images = List<Object>();
  Future<File> _imageFile;
  bool _isVisible = false;

  Future _onAddImageClick(int index,int type) async {
    if (images != null)
      setState(() {
        // ignore: deprecated_member_use
        _imageFile = ImagePicker.pickImage(
          source: type == 1 ? ImageSource.camera : ImageSource.gallery,imageQuality: 50,);
        getFileImage(index);
      });
  }

  void getFileImage(int index) async {
    _imageFile.then((file) async {
      setState(() {
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.imageFile = file;
        images.replaceRange(index,index + 1,[imageUpload]);
      });
    });
  }

  void showImageBox() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  void initState() {
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Post Images'),),body: Column(
        children: <Widget>[
          Container(
            //padding: EdgeInsets.only(right: 5),child: Card(
              elevation: 5,child: ListTile(
                trailing: Icon(Icons.attachment),title: Text('Attachments'),onTap: () {
                  showImageBox();
                },Visibility(
            visible: _isVisible,child: Padding(
              padding: const EdgeInsets.only(top: 5.0,right: 5.0),child: GridView.count(
                shrinkWrap: true,crossAxisCount: 3,childAspectRatio: 1,children: List.generate(images.length,(index) {
                  if (images[index] is ImageUploadModel) {
                    ImageUploadModel uploadModel = images[index];
                    //base64 image
                    List<int> imageBytes =
                        uploadModel.imageFile.readAsBytesSync();
                    String base64Image = base64Encode(
                        imageBytes); //'base64Image' holds the base64 image string
                    return Card(
                      clipBehavior: Clip.antiAlias,child: Stack(
                        children: <Widget>[
                          Image.file(
                            uploadModel.imageFile,fit: BoxFit.cover,width: 300,height: 300,Positioned(
                            right: 5,top: 5,child: InkWell(
                              child: Icon(
                                Icons.remove_circle,size: 20,color: Colors.red,onTap: () {
                                setState(() {
                                  images.replaceRange(
                                      index,['Add Image']);
                                });
                              },RaisedButton(
                            child: Text('imgInfo'),onPressed: () {
                              print(
                                  "${uploadModel.imageFile.lengthSync() / 1024} KB"); //print image size in kb
                              print(uploadModel
                                  .imageFile.path); //print image path
                              log(base64Image);
                            },],);
                  } else {
                    return Card(
                      child: IconButton(
                        icon: Icon(Icons.camera_alt),onPressed: () {
                          showModalBottomSheet(
                            context: context,builder: (BuildContext context) {
                              return SafeArea(
                                child: Container(
                                  child: new Wrap(
                                    children: <Widget>[
                                      new ListTile(
                                        leading: new Icon(Icons.photo_camera),title: new Text('Camera'),onTap: () {
                                          _onAddImageClick(index,1);
                                          Navigator.of(context).pop();
                                        },new ListTile(
                                          leading:
                                              new Icon(Icons.photo_library),title: new Text('Gallery'),onTap: () {
                                            _onAddImageClick(index,2);
                                            Navigator.of(context).pop();
                                          }),);
                            },);
                        },);
                  }
                }),RaisedButton(
            child: Text('send'),onPressed: () {
              //postImage(base64Image);
            },);
  }
}

class ImageUploadModel {
  File imageFile;

  ImageUploadModel({
    this.imageFile,});
}

这是ImageModel。

class ImageModel {
  String attachment;

  ImageModel({this.attachment});

  ImageModel.fromJson(Map<String,dynamic> json) {
    attachment = json['Attachment'];
  }

  Map<String,dynamic> toJson() {
    final Map<String,dynamic> data = new Map<String,dynamic>();
    data['Attachment'] = this.attachment;
    return data;
  }
}

这里是 services.dart，其中 "Attatchment" : " " 我必须发送 base64 图像字符串。

import 'dart:convert';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'package:post_image/model/model.dart';

Future<ImageModel> postImage() async {
  Map data = {
    "Attachment": ""
  };
  var body = json.encode(data);

  final http.Response response = await http.post(
    'url',body: body,);
  print(response.body);
  print(body);

  if (response.statusCode == 200) {
    return ImageModel.fromJson(
      jsonDecode(response.body),);
  } else {
    throw Exception('Failed to send');
  }
}