选择图片——拍照、相册
代码语言：javascript复制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上面去搜索，本文只是针对“选择图片并上传”这一功能点做思路的介绍，所以对于各种第三方，都不会很详细地去讲怎么用。
上传图片到服务器
还是在上面的代码示例的基础上做延展：
代码语言：javascript复制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"),
],
),
),
);
}
}选择完了图片之后，点击上传图片按钮进行图片的网络上传，上传成功之后将图片加载出来。这是上述代码的大致逻辑。
效果如下：
还是那句话，我一直在说的，本文的目的不是为了详细介绍各种第三方组件的详细使用，而是给大家简单聊聊实现一个功能的大致步骤，这样我们在以后项目中遇到类似需求的时候，不至于大脑一片空白，不知从何着手。
简单说一下选择图片以及图片上传的思路。
本文选择的获取图片的第三方是只能选择一张图片，在后期项目中，我们肯定会要求多选，所以大家自己去寻找可以拍摄多张图片或者可以在相册中选择多张图片的第三方组件。
选择好了图片之后，我们将选择的图片记录下来，然后采取Dio这个第三方网络库上传图片，可以上传一张图片，也可以上传多张图片，但时候大家在项目中使用的时候，一定要实现详细阅读使用文档和Demo，我这里的示例仅仅是演示了上传一张图片的场景。
以上。
