Flutter中的相机拍照、相册选择图片、上传图片到服务器

拉维

发布于 2019-09-10 16:05:00

21K3

发布于 2019-09-10 16:05:00

文章被收录于专栏：iOS小生活

选择图片——拍照、相册

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImagePickerPage extends StatefulWidget {
  ImagePickerPage({Key key}) : super(key: key);

  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  //记录选择的照片
  File _image;

  //拍照
  Future _getImageFromCamera() async {
    var image =
        await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);

    setState(() {
      _image = image;
    });
  }

  //相册选择
  Future _getImageFromGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("选择图片并上传")),
      body: Container(
        child: ListView(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                _getImageFromCamera();
              },
              child: Text("照相机"),
            ),
            SizedBox(height: 10),
            RaisedButton(
              onPressed: () {
                _getImageFromGallery();
              },
              child: Text("相册"),
            ),
            SizedBox(height: 10),
            /**
             * 展示选择的图片
             */
            _image == null
                ? Text("no image selected")
                : Image.file(
                    _image,
                    fit: BoxFit.cover,
                  ),
          ],
        ),
      ),
    );
  }
}

运行效果如下：

需要注意的是，image_picker这个第三方组件只能是单选图片，如果大家有多选图片的需要，可以自己去pub.dev上面去搜索，本文只是针对“选择图片并上传”这一功能点做思路的介绍，所以对于各种第三方，都不会很详细地去讲怎么用。

上传图片到服务器

还是在上面的代码示例的基础上做延展：

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImagePickerPage extends StatefulWidget {
  ImagePickerPage({Key key}) : super(key: key);

  _ImagePickerPageState createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  //记录选择的照片
  File _image;

  //当图片上传成功后，记录当前上传的图片在服务器中的位置
  String _imgServerPath;

  //拍照
  Future _getImageFromCamera() async {
    var image =
        await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);

    setState(() {
      _image = image;
    });
  }

  //相册选择
  Future _getImageFromGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      _image = image;
    });
  }

  //上传图片到服务器
  _uploadImage() async {
    FormData formData = FormData.from({
      //"": "", //这里写其他需要传递的参数
      "file": UploadFileInfo(_image, "imageName.png"),
    });
    var response =
        await Dio().post("http://jd.itying.com/imgupload", data: formData);
    print(response);
    if (response.statusCode == 200) {
      Map responseMap = response.data;
      print("http://jd.itying.com${responseMap["path"]}");
      setState(() {
        _imgServerPath = "http://jd.itying.com${responseMap["path"]}";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("选择图片并上传")),
      body: Container(
        child: ListView(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                _getImageFromCamera();
              },
              child: Text("照相机"),
            ),
            SizedBox(height: 10),
            RaisedButton(
              onPressed: () {
                _getImageFromGallery();
              },
              child: Text("相册"),
            ),
            SizedBox(height: 10),
            /**
             * 展示选择的图片
             */
            _image == null
                ? Text("no image selected")
                : Image.file(
                    _image,
                    fit: BoxFit.cover,
                  ),
            SizedBox(height: 10),
            RaisedButton(
              onPressed: () {
                _uploadImage();
              },
              child: Text("上传图片到服务器"),
            ),
            SizedBox(height: 10),
            _imgServerPath == null
                ? Text("没有上传图片")
                : Image.network(
                    "http://jd.itying.com/public/upload/daoyXVTvrCCUeoIliZtNXX-s.png"),
          ],
        ),
      ),
    );
  }
}

选择完了图片之后，点击上传图片按钮进行图片的网络上传，上传成功之后将图片加载出来。这是上述代码的大致逻辑。

效果如下：