您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-31(调用原生硬件Api实现照相机拍照和相册选择、以及拍照上传到服务)

2020-04-30【Flutter】1672人已围观

简介## 一、Flutter image_picker 实现相机拍照和相册选择文档： [https://pub.dev/packages/image_picker](https://pub.dev/packages/image_picker) **==文档中有错误引导，Android必须加下面代码==** > AndroidManifest.xml 文件 ``` ``` > 调用方式 ``` /*拍照*/ _takePhoto() async {

## 一、Flutter image_picker  实现相机拍照和相册选择

文档： [https://pub.dev/packages/image_picker](https://pub.dev/packages/image_picker)

**==文档中有错误引导，Android必须加下面代码==**

> AndroidManifest.xml 文件

```

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.FLASHLIGHT" />
```

> 调用方式

```
/*拍照*/
_takePhoto() async {
  var image =
      await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 400);
  setState(() {
    this._image = image;
  });
}

/*相册*/
_openGallery() async {
  var image = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 400);
  setState(() {
    this._image = image;
  });
}
```

> 文件上传

```
import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

import 'package:dio/dio.dart';

class PicPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _PicState();
  }
}

class _PicState extends State<PicPage> {
  File _image;

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ImagePicker"),
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                onPressed: _takePhoto,
                child: Text("拍照"),
              ),
              RaisedButton(
                onPressed: _openGallery,
                child: Text("选择图库照片"),
              ),
              _buildImage()
            ],
          ),
        ));
  }

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

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

this._uploadImage(image);
  }

/*相册*/
  _openGallery() async {
    var image =
        await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 400);

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

//定义一个组件显示图片
  Widget _buildImage() {
    if (this._image == null) {
      return Text("请选择图片...");
    }
    return Image.file(this._image);
  }

//上传图片
  _uploadImage(File _imageDir) async {
    
    //注意：dio3.x版本为了兼容web做了一些修改，上传图片的时候需要把File类型转换成String类型，具体代码如下
   
    var fileDir=_imageDir.path;

FormData formData = FormData.fromMap({
      "name": "zhangsna 6666666666",
      "age": 20,
      "sex": "男",    
      "file":  await MultipartFile.fromFile(fileDir, filename: "xxx.jpg")     
    });
    var response =
        await Dio().post("http://jd.itying.com/imgupload", data: formData);
    print(response);
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-30(获取设备信息、获取地理位置)

下一篇：flutter-32(检测网络连接监听网络变化)