Flutter 多图选择 multi_image_picker 上传图片

Flutter 多图选择 multi_image_picker 上传图片

最近需要使用 Flutter 实现一个“选择多张图片并上传到后端”的需求，Flutter 官方提供的 image_picker 插件只支持选择一张图片，因此决定使用第三方插件 multi_image_picker。但是 multi_image_picker 因为兼容原因不直接返回文件名，只能返回 ByteData ，上传到后端时稍显繁琐，这里总结一下使用 dio 返回 ByteData 图片数据到后端的代码。

引入依赖

首先需要引入 dio 和 multi_image_picker 的依赖，建议引入前先去看一下最新的版本号，这里使用目前最新的版本。

dependencies:
  dio: ^3.0.8
  multi_image_picker: ^4.6.1

具体实现

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:dio/dio.dart';
import 'package:http_parser/http_parser.dart';

class Test{
  List<Asset> images = List<Asset>();

  // 选择照片并上传
  Future<void> uploadImages() async {
    setState(() {
      images = List<Asset>();
    });
    List<Asset> resultList;

    try {
      resultList = await MultiImagePicker.pickImages(
        // 选择图片的最大数量
        maxImages: 9,
        // 是否支持拍照
        enableCamera: true,
        materialOptions: MaterialOptions(
            // 显示所有照片，值为 false 时显示相册
            startInAllView: true,
            allViewTitle: '所有照片',
            actionBarColor: '#2196F3',
            textOnNothingSelected: '没有选择照片'
        ),
      );
    } on Exception catch (e) {
      e.toString();
    }

    if (!mounted) return;
    images = (resultList == null) ? [] : resultList;
    // 上传照片时一张一张上传
    for(int i = 0; i < images.length; i++) {
      // 获取 ByteData
      ByteData byteData = await images[i].getByteData();
      List<int> imageData = byteData.buffer.asUint8List();

      MultipartFile multipartFile = MultipartFile.fromBytes(
        imageData,
        // 文件名
        filename: 'some-file-name.jpg',
        // 文件类型
        contentType: MediaType("image", "jpg"),
      );
      FormData formData = FormData.fromMap({
        // 后端接口的参数名称
        "files": multipartFile
      });
      // 后端接口 url
      String url = ''；
      // 后端接口的其他参数
      Map<String, dynamic> params = Map();
      // 使用 dio 上传图片
      var response = await dio.post(url, data: formData, queryParameters: params);
      //
      // do something with response...
    }
  }
}

使用时可将 uploadImages() 与点击按钮等操作绑定。

关于 dio 和 multi_image_picker 的其他内容可以参考官方文档：dio 和 multi_image_picker 。