Flutter_学习记录_ ImagePicker拍照、录制视频、相册选择照片和视频、上传文件
插件地址:https://pub.dev/packages/image_picker
- 添加插件
- 添加配置
android无需配置开箱即用,ios还需要配置
info.plist
<key>NSPhotoLibraryUsageDescription</key>
<string>应用需要访问相册读取文件</string>
<key>NSCameraUsageDescription</key>
<string>应用需要访问相机拍照</string>
<key>NSMicrophoneUsageDescription</key>
<string>应用需要访问麦克风录制视频</string>
- 核心代码
import 'package:image_picker/image_picker.dart';
final ImagePicker picker = ImagePicker();
// 从相册选择相机
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
// 拍照
final XFile? photo = await picker.pickImage(source: ImageSource.camera);
// 从相册选择视频
final XFile? galleryVideo =
await picker.pickVideo(source: ImageSource.gallery);
// 录制视频
final XFile? cameraVideo = await picker.pickVideo(source: ImageSource.camera);
- 完整代码
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
// 本地视频播放的逻辑
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';
class ImagePickerDemo extends StatefulWidget {
const ImagePickerDemo({super.key});
State<ImagePickerDemo> createState() => _ImagePickerDemoState();
}
class _ImagePickerDemoState extends State<ImagePickerDemo> {
final ImagePicker _imagePicker = ImagePicker();
XFile? _pickerImage;
XFile? _pickerVideo;
// 配置加载本地视频
late VideoPlayerController _videoPlayerController;
late ChewieController _chewieController;
// 拍照
void _imagePickerCamera() async {
final XFile? image = await _imagePicker.pickImage(
source: ImageSource.camera,
// 可以不设置,设置上可以避免数据太大
maxHeight: 800,
maxWidth: 800
);
if (image != null) {
print(image.path);
setState(() {
_pickerVideo = null;
_pickerImage = image;
});
}
}
// 相册选择图片
void _imagePickerGallery() async {
final XFile? image = await _imagePicker.pickImage(
source: ImageSource.gallery,
// 可以不设置,设置上可以避免数据太大
maxHeight: 800,
maxWidth: 800
);
if (image != null) {
print(image.path);
setState(() {
_pickerVideo = null;
_pickerImage = image;
});
}
}
// 视频-选择相机录制
void _videoPickerCamera() async {
final XFile? video = await _imagePicker.pickVideo(source: ImageSource.camera);
if (video != null) {
print(video.path);
await _initVideo(File(video.path));
setState(() {
_pickerImage = null;
_pickerVideo = video;
});
}
}
// 视频-选择相册
void _videoPickerGallery() async {
final XFile? video = await _imagePicker.pickVideo(source: ImageSource.gallery);
if (video != null) {
print(video.path);
await _initVideo(File(video.path));
setState(() {
_pickerImage = null;
_pickerVideo = video;
});
}
}
// 显示图片或者显示视频
Widget _showImageOrVideoWidget() {
if (_pickerImage != null) {
return Image.file(File(_pickerImage!.path));
} else if (_pickerVideo != null) {
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
child: Chewie(controller: _chewieController)
);
} else {
return Text("请选择图片或者视频");
}
}
// 初始化播放器--用于播放本地视频
Future _initVideo(File fileDir) async {
_videoPlayerController = VideoPlayerController.file(fileDir);
await _videoPlayerController.initialize();
_chewieController = ChewieController(
videoPlayerController: _videoPlayerController,
aspectRatio: _videoPlayerController.value.aspectRatio,
autoPlay: true,
looping: false
);
}
void dispose() {
try {
_videoPlayerController.dispose();
_chewieController.dispose();
} catch (e) {
print(e);
}
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("图片选择器"),
),
body: ListView(
padding: EdgeInsets.all(10),
children: [
Center(child: ElevatedButton(
onPressed: _imagePickerGallery,
child: Text("图片-选择相册")
)),
Center(child: ElevatedButton(
onPressed: _imagePickerCamera,
child: Text("图片-选择相机")
)),
Center(child: ElevatedButton(
onPressed: _videoPickerGallery,
child: Text("视频-选择相册")
)),
Center(child: ElevatedButton(
onPressed: _videoPickerCamera,
child: Text("视频-选择相机")
)),
SizedBox(height: 20),
// 展示图片或者视频
_showImageOrVideoWidget()
],
),
);
}
}
- 效果图
- 上传文件(未测试,先记录)
_uploadFile(String imagePath) async {
var formData = FormData.fromMap({
'name': 'wendux',
'age': 25,
'file': await MultipartFile.fromFile(imagePath, filename: 'aaa.png')
});
var response = await Dio().post(
'https://xxx/imgupload',
data: formData
);
print(response);
}
}