照相显示因服务器,Flutter 相机拍照并上传到服务器
田螺收纳 app 需要拍摄衣物图片并上传服务器，研究了一波 Flutter 操作相机的细节，本文为实践笔记。
引入第三方库
编辑 pubspec.yaml 文件，添加第三库:
dependencies:
camera:
path_provider:
path:
camera 获取手机上的相机，返回值是个数组，手机一般自带一个相机，还可以下载第三方相机如美颜相机等；
path_provider 提供路徑來儲存照片；
path 建立一個可以在使用任何裝置的路徑。
实现拍照功能
想一想我们如何使用 app 进行拍照，我们通常会点击拍照按钮，之后会跳转到一个拍照的页面。
编写拍照页面
如下是一个普通的拍照页面，你可以直接将它复制到您的项目中，也可以在阅读此页面源码后进行局部定制。
拍照页面接收两个参数：
camera 您需要给拍照页面传递一个相机。如前文所述，一台手机上可能会有多个可使用的相机(手机自带相机、从应用商店下载的美颜相机)；
onOk 当您点击确认拍照时，在这个方法里编写需要做哪些事，如将拍照的图片上传到服务器或直接预览图片等。
import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
class TakePictureScreen extends StatefulWidget {
final CameraDescription camera;
final Function onOk;
const TakePictureScreen({
Key key,
@required this.camera,
@required this.onOk,
}) : super(key: key);
@override
TakePictureScreenState createState() => TakePictureScreenState();
}
class TakePictureScreenState extends State {
CameraController _controller;
Future _initializeControllerFuture;
String _imagePath;
@override
void initState() {
super.initState();
_controller = CameraController(
widget.camera,
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (_imagePath != null) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: [
Image.file(File(_imagePath)),
Positioned(
bottom: 20.0,
left: 20.0,
child: Container(
decoration: new BoxDecoration(
border:
new Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
color: Colors.white, // 底色
shape: BoxShape.circle, // 圆形，使用圆形时不可以使用borderRadius
),
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.replay),
onPressed: () {
setState(() {
_imagePath = null;
});
},
),
),
),
Positioned(
bottom: 20.0,
right: 20.0,
child: Container(
decoration: new BoxDecoration(
border:
new Border.all(color: Colors.grey, width: 0.5), // 边色与边宽度
color: Colors.white, // 底色
shape: BoxShape.circle, // 圆形，使用圆形时不可以使用borderRadius
),
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.done),
onPressed: () {
widget.onOk(context, _imagePath);
},
),
),
),
],
),
);
}
return Scaffold(
body: FutureBuilder(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CameraPreview(_controller);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () async {
try {
await _initializeControllerFuture;
final String path = join(
(await getTemporaryDirectory()).path,
'${DateTime.now()}.png',
);
await _controller.takePicture(path);
setState(() {
_imagePath = path;
});
} catch (e) {
print(e);
}
},
),
);
}
}
点击按钮，获取相机，跳转到拍照页面
仅有拍照页面是无法完成拍照功能的，下面模拟在主页面点击按钮，我们需要获取手机上可用的相机，之后跳转到拍照页面。
onOk 方法接收两个参数：
context 拍照页面(TakePictureScreen)的上下文，用于处理完业务逻辑后手动调用 Navigator.pop(context) 退出拍照页面；
imagePath 在拍照页面进行拍摄后，照片会暂时存储在手机本地上，这个参数是存在手机上的路径；
IconButton(
icon: Icon(Icons.camera_alt),
onPressed: () async {
// 获取手机上可用的所有相机，返回值是个数组
final List cameras =
await availableCameras();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TakePictureScreen(
camera: cameras.first, // 使用数组中的第一个相机
onOk: (BuildContext context, String imagePath) async {
// ......
},
),
),
);
},
),
将拍摄的图片上传到服务器
完善前一步骤的 onOk 函数体内容，使用 dio(v3.0.0) 网络请求库上传图片。
onOk: (BuildContext context, String imagePath) async {
// 上传图片
FormData formData = FormData.fromMap({
'photo': await MultipartFile.fromFile(imagePath,
filename: '${DateTime.now()}.png'),
});
Response result = await HttpUtils.getInstance().post(
'/upload',
data: formData,
options: Options(headers: {
'Authorization': 'Bearer ' + token,
}),
);
print('result = $result');
// 业务逻辑处理完，记得退出拍照页面
Navigator.pop(context);
},
可能出现的报错
启动项目，可能会出现一些错误，总结如下：
Unhandled Exception: MissingPluginException(No implementation found for method canLaunch on channel plugins.flutter.io/url_launcher)
字面意思是插件找不到。
造成这个报错的原因是：我们先启动了 Flutter 应用，之后再去 pubspec.yaml 文件添加 camera 插件，此时是无法生效的，会报插件丢失的错误。
解决方法：关闭 Flutter 应用，重新启动即可。
uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared in library
字面意思，第三方库 camera 要求 minSdkVersion 版本最低为 21，但是我们项目里自带的 minSdkVersion 版本是 16，不兼容导致报错。
解决方法：将项目的 minSdkVersion 版本号手动改为 21 即可。
修改方法：在根目录下找到 /android/app/build.gradle 文件：
defaultConfig {
applicationId "com.example.projectname"
minSdkVersion 21 // <===================== 更改成 21，之前的默认值是 16
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}