Flutter_学习记录_ ImagePicker拍照、录制视频、相册选择照片和视频、上传文件

插件地址：https://pub.dev/packages/image_picker

添加插件
添加配置

android无需配置开箱即用，ios还需要配置info.plist

dart 复制代码

<key>NSPhotoLibraryUsageDescription</key> 
	<string>应用需要访问相册读取文件</string> 
<key>NSCameraUsageDescription</key> 
	<string>应用需要访问相机拍照</string> 
<key>NSMicrophoneUsageDescription</key> 
	<string>应用需要访问麦克风录制视频</string>

核心代码

dart 复制代码

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);

完整代码

dart 复制代码

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});

  @override
  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
    );
  }

  @override
  void dispose() {
    try {
      _videoPlayerController.dispose();
      _chewieController.dispose();
    } catch (e) {
      print(e);
    }
   
    super.dispose();
  }

  @override
  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()
        ],
      ),
    );
  }
}

效果图
上传文件（未测试，先记录）

dart 复制代码

  _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); 
  }
}