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 。