基于Flutter实现图片选择和图片上传
Flutter是Google公司推出的一套移动应用开发框架，其极佳的跨平台能力和丰富的组件库为开发者提供了极大的便利。本文将介绍如何使用Flutter实现图片选择和图片上传功能。
一、实现图片选择
在Flutter中，可以使用image_picker插件来实现图片选择。以下是具体的步骤。
1.在pubspec.yaml文件中添加image_picker依赖。
dependencies:
image_picker: ^0.7.3
2.在代码中导入image_picker及相关依赖。
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
3.在需要调用图片选择功能的Widget中，添加点击事件，通过ImagePicker.pickImage方法调用图片选择器。
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
二、实现图片上传
Flutter中实现图片上传的方法与普通的HTTP文件上传相似。以下是具体的步骤。
1.在pubspec.yaml文件中添加http和dio依赖。
dependencies:
http: ^0.13.3
dio: ^4.0.0
其中，http是Flutter自带的HTTP请求库，而dio则是一款更加易用的HTTP请求库。
2.编写上传方法。如果使用http库，上传代码如下：
_uploadImage() async {
if (_image == null) return;
var request = http.MultipartRequest(
'POST',
Uri.parse('http://your_upload_url.com'),
);
request.files.add(await http.MultipartFile.fromPath('image', _image.path));
var response = await request.send();
if (response.statusCode == 200) {
print('Uploaded!');
} else {
print('Failed to upload: ${response.reasonPhrase}');
}
}
如果使用dio库，上传代码如下：
_uploadImage() async {
if (_image == null) return;
var formData = dio.FormData.fromMap({
'image': await dio.MultipartFile.fromFile(_image.path),
});
var response = await dio.Dio().post('http://your_upload_url.com', data: formData);
if (response.statusCode == 200) {
print('Uploaded!');
} else {
print('Failed to upload: ${response.statusMessage}');
}
}
以上代码中，需要将image替换为具体的文件参数名，并将http接口地址替换为实际上传地址。
三、完整代码示例
以下是实现图片选择和图片上传的完整代码示例。
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;
import 'package:dio/dio.dart' as dio;
class ImageUploadDemo extends StatefulWidget {
@override
_ImageUploadDemoState createState() => _ImageUploadDemoState();
}
class _ImageUploadDemoState extends State<ImageUploadDemo> {
File _image;
Future getImage() async {
var image = await ImagePicker.pickImage(source: ImageSource.gallery);
setState(() {
_image = image;
});
}
_uploadImage() async {
if (_image == null) return;
// 使用http库上传图片
var request = http.MultipartRequest(
'POST',
Uri.parse('http://your_upload_url.com'),
);
request.files.add(await http.MultipartFile.fromPath('image', _image.path));
// 使用dio库上传图片
// var formData = dio.FormData.fromMap({
// 'image': await dio.MultipartFile.fromFile(_image.path),
// });
// var response = await dio.Dio().post('http://your_upload_url.com', data: formData);
var response = await request.send();
if (response.statusCode == 200) {
print('Uploaded!');
} else {
print('Failed to upload: ${response.reasonPhrase}');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Upload Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_image == null
? Text('No image selected.')
: Image.file(
_image,
height: 200,
),
SizedBox(height: 20),
ElevatedButton(
child: Text('Pick Image'),
onPressed: getImage,
),
SizedBox(height: 20),
ElevatedButton(
child: Text('Upload Image'),
onPressed: _uploadImage,
),
],
),
),
);
}
}