flutter实现选择图片视频上传到oss和图片视频的预览功能

八分钟de温暖2024-05-04 16:02

一、效果图

flutter实现选择图片视频上传到oss和图片视频的预览功

二、所需要的依赖

image_picker: ^1.1.0 //选择图片

flutter_oss_aliyun: ^6.4.1 //图片上传到阿里云oss

uuid: ^4.4.0 //生成唯一uuid

interactiveviewer_gallery: ^0.6.0 //图片视频预览

cached_network_image: ^3.3.1 //缓存网络图片，避免多次请求

video_thumbnail: ^0.5.3 //视频生成缩略图

video_player: ^2.8.6 //视频播放

三、主要源码解析

1、初始化oss,参考 flutter_oss_aliyun库

c 复制代码 
initUploadOss() {
  Auth authGetter() {
    return Auth(
      accessKey: "",
      accessSecret: '',
      expire: '2024-05-23T13:26:58Z',
      secureToken:'',
    );
  }

  Client.init(
      ossEndpoint: ProjectConfig.ossEndpoint,
      bucketName: ProjectConfig.bucketName,
      authGetter: authGetter);
}

2、选择上传图片视频方式

c 复制代码 
List<Map<String, dynamic>> selectPictureMethodDicData = [
  {
    "label": "选择照片",
    "value": "0",
  },
  {
    "label": "拍照",
    "value": "1",
  },
  {
    "label": "选择视频",
    "value": "2",
  },
  {
    "label": "拍视频",
    "value": "3",
  },
   {
    "label": "选择单张照片/视频",
    "value": "4",
  },
  {
    "label": "选择多张照片或者视频",
    "value": "5",
  },
];

3、定义MedaiModel类

c 复制代码 
import 'dart:typed_data';

class MedaiModel {
  int process;
  String ossUrl;
  final String localUrl;
  final Uint8List bytes;
  final String extension;
  final String id;
  final String thumbnailPath;
  final String sourceType;

  MedaiModel({
    required this.process,
    required this.ossUrl,
    required this.localUrl,
    required this.bytes,
    required this.extension,
    required this.id,
    required this.thumbnailPath,
    required this.sourceType,
  });

  factory MedaiModel.fromJson(Map<String, dynamic> json) {
    return MedaiModel(
      process: json["process"] ?? 0,
      ossUrl: json["ossUrl"] ?? "",
      localUrl: json["localUrl"] ?? "",
      bytes: json["bytes"] ?? Uint8List(0),
      extension: json["extension"] ?? "",
      id: json["id"] ?? "",
      thumbnailPath: json["thumbnailPath"] ?? "",
      sourceType: json["sourceType"] ?? "",
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'process': process,
      'ossUrl': ossUrl,
      'localUrl': localUrl,
      'bytes': bytes,
      'extension': extension,
      'id': id,
      'thumbnailPath': thumbnailPath,
      'sourceType': sourceType,
    };
  }
}

4、根据选择视频方式产品图片视频资源

c 复制代码 
Future selectMedia(String value, RxList<dynamic>? filesController,
    {bool isMultiple = false,
    int fileSize = 0,
    int limit = 1,
    int imageQuality = 90,
    Duration? maxDuration,
    bool isMedia = false}) async {
  final ImagePicker picker = ImagePicker();
  ImageSource imageSource = ImageSource.gallery;
  List<XFile>? files = [];
  if (value == "0" || value == "2") {
    //相册
    imageSource = ImageSource.gallery;
  } else if (value == "1" || value == "3") {
    //相机
    imageSource = ImageSource.camera;
  }
  if (value == "0" || value == "1") {
    //照片
    if (isMultiple) {
      final List<XFile> images =
          await picker.pickMultiImage(imageQuality: imageQuality, limit: limit);
      files.addAll(images);
    } else {
      final XFile? image = await picker.pickImage(
          source: imageSource, imageQuality: imageQuality);
      if (image != null) {
        files.add(image);
      }
    }
  } else if (value == "2" || value == "3") {
    //视频
    final XFile? image =
        await picker.pickVideo(source: imageSource, maxDuration: maxDuration);
    if (image != null) {
      files.add(image);
    }
  }
  if (value == "4") {
    final XFile? media = await picker.pickMedia(imageQuality: imageQuality);
    if (media != null) {
      files.add(media);
    }
  } else if (value == "5") {
    final List<XFile> medias = await picker.pickMultipleMedia(
        imageQuality: imageQuality, limit: limit);
    if (medias.length > 1) {
      files.addAll(medias);
    }
  }

  for (var file in files) {
    bool isUpload = true;
    Uint8List? bytes = await file.readAsBytes();
    if (fileSize > 0) {
      int? byte = bytes.lengthInBytes;
      if (byte / 1024 / 1024 > fileSize) {
        EasyLoading.showToast("资源大小应小于${fileSize}M");
        isUpload = false;
      }
    }
    if (isUpload) {
      int indexOf = file.path.lastIndexOf(".");
      String extension = file.path.substring(indexOf + 1);
      String sourceType = getSourceType(file.path);
      String thumbnailPath = file.path;
      if (sourceType == 'video') {
        thumbnailPath = await getVideoThumbnail(file.path);
      }

      MedaiModel medaiModel = MedaiModel.fromJson({
        "uploadProcess": 0,
        "ossUrl": "",
        "localUrl": file.path,
        "bytes": bytes,
        "extension": extension,
        "id": Uuid().v1(),
        "thumbnailPath": thumbnailPath,
        "sourceType": sourceType,
      });
      filesController!.add(medaiModel);
    }
  }

  for (int i = 0; i < filesController!.length; i++) {
    MedaiModel file = filesController[i];
    if (file.ossUrl == "") {
      String uploadPath =
          'public/upload-test/${getNowDate()}/${Uuid().v1()}.${file.extension}';
      try {
        await Client().putObject(
          file.bytes,
          uploadPath,
          option: PutRequestOption(
            onSendProgress: (int sent, int total) {
              file.process = ((sent / total) * 100).toInt();
              print("上传的进度${file.process}");
              filesController.refresh(); //不添加此句，会在下一次才更新
            },
          ),
        );
        file.ossUrl =
            "https://${ProjectConfig.bucketName}.${ProjectConfig.ossEndpoint}/$uploadPath";
      } catch (e) {
        print("上传失败$e");
      }
    }
  }
}

5、判断资源类型

c 复制代码 
String getSourceType(String path) {
  String ossPath = path.split("?")[0];
  int index = ossPath.lastIndexOf(".");
  String typeStr = ossPath.substring(index + 1).toUpperCase();
  List<String> imagesList = ["BMP", "JPG", "JPEG", "PNG", "GIF"];
  List<String> videoList = ["AVI", "WMV", "MPG", "MPEG", "MOV", "MP4"];
  if (imagesList.contains(typeStr)) {
    return "image";
  } else if (videoList.contains(typeStr)) {
    return "video";
  } else {
    return "image";
  }
}

6、获取视频缩略图

c 复制代码 
Future<String> getVideoThumbnail(String path) async {
  String? thumbnailPath = await VideoThumbnail.thumbnailFile(
      video: path, imageFormat: ImageFormat.JPEG, maxWidth: 128, quality: 25);
  return thumbnailPath!;
}

7、获取资源显示的视图

c 复制代码 
Widget getSourceView(MedaiModel source,
    {double width = 100, double height = 100}) {
  if (source.sourceType == 'video') {
    return Image.file(File(source.thumbnailPath),
        width: width, height: height, fit: BoxFit.cover);
  } else {
    if (source.localUrl != '') {
      return Image.file(File(source.localUrl),
          width: width, height: height, fit: BoxFit.cover);
    } else {
      return CachedNetworkImage(
          imageUrl: source.ossUrl,
          width: width,
          height: height,
          fit: BoxFit.cover);
    }
  }
}

8、打开预览图片

c 复制代码 
void openGallery(List<MedaiModel> sourceList, MedaiModel source) {
  int initIndex = 0;
  for (int i = 0; i < sourceList.length; i++) {
    if (sourceList[i].id == source.id) {
      initIndex = i;
      break;
    }
  }
  Navigator.of(Get.context!).push(
    HeroDialogRoute<void>(
      builder: (BuildContext context) => DisplayGesture(
        child: InteractiveviewerGallery<dynamic>(
          sources: sourceList,
          initIndex: initIndex,
          itemBuilder: (BuildContext context, int index, bool isFocus) {
            MedaiModel sourceEntity = sourceList[index];
            if (sourceEntity.sourceType == 'video') {
              return PreviewVideo(
                sourceEntity,
                isFocus: isFocus,
              );
            } else {
              return PreviewImage(sourceEntity);
            }
          },
          onPageChanged: (int pageIndex) {
            print("nell-pageIndex:$pageIndex");
          },
        ),
      ),
    ),
  );
}

9、预览图片视图

c 复制代码 
import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:company_manage_flutter/model/mediaModel.dart';
import 'package:flutter/material.dart';

class PreviewImage extends StatefulWidget {
  MedaiModel  source;

  PreviewImage(this.source);

  @override
  State<PreviewImage> createState() => _PreviewImageState();
}

class _PreviewImageState extends State<PreviewImage> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => Navigator.of(context).pop(),
      child: Center(
        child: Hero(
          tag: widget.source.id,
          child: widget.source.localUrl == ''
              ? CachedNetworkImage(
                  imageUrl: widget.source.ossUrl,
                  fit: BoxFit.contain,
                )
              : Image.file(
                  File(widget.source.localUrl),
                  fit: BoxFit.contain,
                ),
        ),
      ),
    );
  }
}

10、预览视频视图

c 复制代码 
import 'dart:io';

import 'package:company_manage_flutter/model/mediaModel.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class PreviewVideo extends StatefulWidget {
  final MedaiModel source;
  final bool? isFocus;

  PreviewVideo(this.source, {this.isFocus});

  @override
  State<PreviewVideo> createState() => _PreviewVideoState();
}

class _PreviewVideoState extends State<PreviewVideo> {
  VideoPlayerController? _controller;
  late VoidCallback listener;
  _PreviewVideoState() {
    listener = () {
      if (!mounted) {
        return;
      }
      setState(() {});
    };
  }

  @override
  void initState() {
    super.initState();
    init();
  }

  init() async {
    if (widget.source.localUrl == '') {
      _controller =
          VideoPlayerController.networkUrl(Uri.parse(widget.source.ossUrl));
    } else {
      _controller =
          VideoPlayerController.file(File(widget.source.localUrl));
    }

    // loop play
  //  _controller!.setLooping(true);
    await _controller!.initialize();
    setState(() {});
    _controller!.addListener(listener);
  }

  @override
  void dispose() {
    super.dispose();
    _controller!.removeListener(listener);
    _controller?.pause();
    _controller?.dispose();
  }

  @override
  void didUpdateWidget(covariant PreviewVideo oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (oldWidget.isFocus! && !widget.isFocus!) {
      // pause
      _controller?.pause();
    }
  }

  @override
  Widget build(BuildContext context) {
    return _controller!.value.isInitialized
        ? Stack(
            alignment: Alignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  setState(() {
                    _controller!.value.isPlaying
                        ? _controller!.pause()
                        : _controller!.play();
                  });
                },
                child: Hero(
                  tag: widget.source.id,
                  child: AspectRatio(
                    aspectRatio: _controller!.value.aspectRatio,
                    child: VideoPlayer(_controller!),
                  ),
                ),
              ),
              _controller!.value.isPlaying == true
                  ? SizedBox()
                  : IgnorePointer(
                      ignoring: true,
                      child: Icon(
                        Icons.play_arrow,
                        size: 100,
                        color: Colors.red,
                      ),
                    ),
            ],
          )
        : Theme(
            data: ThemeData(
                cupertinoOverrideTheme:
                    CupertinoThemeData(brightness: Brightness.dark)),
            child: CupertinoActivityIndicator(radius: 30));
  }
}
相关推荐
darkdragonking2 小时前
FLV视频封装格式详解
音视频
coder_pig3 小时前
📝小记：Ubuntu 部署 Jenkins 打包 Flutter APK
flutter·ubuntu·jenkins
元争栈道4 小时前
webview和H5来实现的android短视频(短剧)音视频播放依赖控件
android·音视频
元争栈道5 小时前
webview+H5来实现的android短视频(短剧)音视频播放依赖控件资源
android·音视频
捡芝麻丢西瓜5 小时前
flutter自学笔记5- dart 编码规范
flutter·dart
恋猫de小郭5 小时前
什么？Flutter 可能会被 SwiftUI/ArkUI 化？全新的 Flutter Roadmap
flutter·ios·swiftui
MediaTea9 小时前
Pr：音频仪表
音视频
桃园码工9 小时前
13_HTML5 Audio(音频) --[HTML5 API 学习之旅]
音视频·html5·audio
cuijiecheng201815 小时前
音视频入门基础：MPEG2-TS专题（21）——FFmpeg源码中，获取TS流的视频信息的实现
ffmpeg·音视频
γ..15 小时前
基于MATLAB的图像增强
开发语言·深度学习·神经网络·学习·机器学习·matlab·音视频
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程