flutter 专题 六十八 Flutter 多图片上传

使用Flutter进行应用开发时,经常会遇到选图、拍照等需求。如果要求不高,Flutter图库选择可以使用官方提供的image_picker,如果需要多选,那么可以使用multi_image_picker插件库。multi_image_picker库支持图库管理,多选,拍照,当然还可以自定义资源管理界面。

multi_image_picker的使用也比较简单,首先,需要在pubspec.yaml配置文件中添加multi_image_picker库的依赖,如下所示。

复制代码
dependencies:
  dio: ^3.0.9
  multi_image_picker: ^4.7.10

然后,我们编写逻辑代码,如下所示。

复制代码
openMultiPhoto() async {
    List<Asset> assets = await MultiImagePicker.pickImages(
        maxImages: 9,
        enableCamera: true,
      materialOptions:MaterialOptions(
          startInAllView:true,
          allViewTitle:'所有照片',
          actionBarColor:'#2196F3',
          textOnNothingSelected:'没有选择照片'
      ),
    );

    if (assets != null && assets.length > 0) {
      for (int i = 0; i < assets.length; i ++) {
        Asset asset = assets[i];
        uploadFile(asset);
      };
    }
  }

  //上传服务器
  uploadFile(image) async {
    ByteData data =await image.getByteData();
    final buffer = data.buffer;
    FormData form =FormData.fromMap({
      //后端接口的参数名称
      'name': image.name,
      'file':MultipartFile.fromBytes(buffer.asUint8List(data.offsetInBytes, data.lengthInBytes)),
    });
    String serverPath='';
    //其他上传参数
    Map<String, dynamic> params = Map();
    await Dio().post(serverPath, data: form,queryParameters: params);
  }

  //ByteData转换成File
  Future<void> writeToFile(ByteData data, String path) {
    final buffer = data.buffer;
    return  File(path).writeAsBytes(
        buffer.asUint8List(data.offsetInBytes, data.lengthInBytes));
  }

然后,我们做一个测试的按钮,代码如下。

复制代码
MyButton(text: '多图片选择', btnColors: Colors.blue,
        onPressed: () {
          openMultiPhoto();
   }, )
相关推荐
namekong84 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天5 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄8 小时前
HTML 表单控件
前端·microsoft·html
学习笔记1019 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-19439 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧10 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台10 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10010 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
星释10 小时前
鸿蒙Flutter三方库适配指南-02.Flutter相关知识基础
flutter·华为·harmonyos
Captaincc10 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员