flutter 调用原生硬件 Api 实现照相机 拍照和相册选择 以及拍照上传

 

Flutter image_picker 插件介绍

// image_picker 插件可以帮助在 Flutter 中实现相机拍照和相册选择功能。
https://pub.dev/packages/image_picker

Flutter 使用dio插件上传图片到服务器

// dio 插件可以帮助在 Flutter 中上传图片到服务器。
https://pub.dev/packages/dio

上传图片的 代码实现 (dio 2.x 版本)

// 使用 dio 2.1.7 版本的上传图片示例代码
_uploadImage(_imageDir) async{
    FormData formData = new FormData.from({
      "name": "zhangsna 6666666666", // 名字
      "age": 20,                     // 年龄
      "sex":"男",                    // 性别
      "file":new UploadFileInfo(_imageDir, "xxx.jpg"),  // 文件信息
    });
    // 向指定的URL上传图片
    var response = await Dio().post("http://jd.itying.com/imgupload", data: formData);

    print(response);  // 打印响应内容
}

上传图片的 代码实现 (dio 3.x 版本)

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

class CameraPage extends StatefulWidget{
  CameraPage({Key key});
  _CameraPage createState() => _CameraPage();
}

class _CameraPage extends State {
  var cameraImg;
  var albumImg;

  // 使用相机获取图片
  getCameraImg() async {
    var camera = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 100);  // 使用相机拍照
    uploadImg(camera);  // 上传图片
    setState(() {
      cameraImg = camera;
    });
  }

  // 使用相册获取图片
  getAlbumImg() async {
    var album = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 100);  // 从相册选择图片
    setState(() {
      albumImg = album;
    });
  }

  // 使用dio上传图片到服务器
  uploadImg(File imgUrl) async {
    var path = imgUrl.path;   // 获取图片的路径
    var formData = FormData.fromMap({
      "name": "wendux",
      "age": 25,
      "file":  MultipartFile.fromFileSync(path, filename: "upload.img")   // 创建一个MultipartFile
    });
    // 向指定的URL上传图片
    var response = await Dio().post("https://pub.dev/packages/dio", data: formData);
    print(response);  // 打印响应内容
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('设备硬件')
        ),
        body: ListView(
          children: <Widget>[
            RaisedButton(child: Text('相机 上传图片'), onPressed: () {
              getCameraImg();
            }),
            cameraImg == null ? SizedBox(height: 0) : Container(
              height: 100,
              child: Image.file(cameraImg),
            ),
            RaisedButton(child: Text('相册'), onPressed: getAlbumImg),
            albumImg == null ? SizedBox(height: 0) : Container(
              height: 100,
              child: Image.file(albumImg),
            )
          ],
        )
    );
  }
}