Flutter中使用image_picker拍照并上传

本文详细介绍如何在 Flutter 应用中使用 image_picker 插件实现拍照和图片选择功能，并结合 Dio 库实现图片上传到服务器的完整流程。

安装插件

首先在 pubspec.yaml 文件中配置 image_picker 插件：

yaml

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.6.7+21
  dio: ^3.0.10

在 pubspec.yaml 中配置保存后，VS Code 环境会自动下载依赖包。如果无法正常下载，执行 flutter pub get 命令。

引入依赖

在需要用到的该插件的文件中引入插件包：

dart

import 'package:image_picker/image_picker.dart';

使用插件

以下是获取图片的核心代码：

dart

// 图片文件
File _image;
// 实例化
final picker = ImagePicker();

// 获取图片方法
Future getImage() async {
  final pickedFile = await picker.getImage(
    // 拍照获取图片
    // source: ImageSource.camera,
    // 手机选择图库
    source: ImageSource.gallery,
    // 图片的最大宽度
    maxWidth: 400
  );

  // 更新状态
  setState(() {
    if (pickedFile != null) {
      _image = File(pickedFile.path);
    } else {
      print('没有选择任何图片');
    }
  });
}

结合 Dio 实现上传图片

引入 Dio 插件包：

dart

import 'package:dio/dio.dart';

编写上传的方法：

dart

var dio = Dio();

// 上传图片的方法
void uploadImg(imageUrl) async {
  FormData formData = FormData.fromMap({
    "name": "admin",
    "password": 123456,
    "file": await MultipartFile.fromFile(
      imageUrl,
      filename: "avatar.img"
    )
  });

  var result = await dio.post("http://js.itying.com/imgupload", data: formData);
  print(result);
}

完整示例

dart

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

class ImagePickerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImagePickerState();
  }
}

class _ImagePickerState extends State<ImagePickerPage> {
  // 图片文件
  File _image;
  // 实例化
  final picker = ImagePicker();

  // 获取图片
  Future getImage() async {
    final pickedFile = await picker.getImage(
      // 拍照获取图片
      // source: ImageSource.camera,
      // 手机选择图库
      source: ImageSource.gallery,
      // 图片的最大宽度
      maxWidth: 400
    );

    // 更新状态
    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
        // 上传图片到服务器
        uploadImg(pickedFile.path);
      } else {
        print('没有选择任何图片');
      }
    });
  }

  var dio = Dio();

  // 上传图片的方法
  void uploadImg(imageUrl) async {
    FormData formData = FormData.fromMap({
      "name": "admin",
      "password": 123456,
      "file": await MultipartFile.fromFile(
        imageUrl,
        filename: "avatar.img"
      )
    });

    var result = await dio.post("http://js.itying.com/imgupload", data: formData);
    print(result);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ImagePicker"),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 点击按钮
            RaisedButton(
              onPressed: getImage,
              child: Text("获取图片"),
            ),
            // 展示图片
            Center(
              child: _image == null
                  ? Text('没有选择任何图片')
                  : Image.file(_image),
            ),
          ],
        )
      )
    );
  }
}

参考链接

注意：image_picker 插件仅支持单选图片。如需多选功能，可在 pub.dev 上搜索其他第三方插件。

字节笔记本

Flutter中使用image_picker拍照并上传

安装插件

引入依赖

使用插件

结合 Dio 实现上传图片

完整示例

参考链接