最近在做客服系统,发消息可以发文字,图片,视频。现在记录下选择图片(多图)然后发送给后端
我用的是第三方库:multi_image_picker
插件库地址:multi_image_picker | Flutter Package
第一步安装依赖
multi_image_picker: ^4.8.1
第二步引入项目对应页面
import 'package:multi_image_picker/multi_image_picker.dart';
import 'dart:typed_data';
import 'package:dio/dio.dart';
第三步代码实现
//选择文件上传
void openGallerySystem() async {
List<Asset> resultList = <Asset>[];
resultList = await MultiImagePicker.pickImages(
//最多选择几张照片
maxImages: 9,
//是否可以拍照
enableCamera: true,
selectedAssets: img,
cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
materialOptions: MaterialOptions(
startInAllView: true,
allViewTitle: 'all photos'.tr,
//所有照片
actionBarColor: '#2196F3',
//未选择图片时提示
textOnNothingSelected: 'no photo selected'.tr,
//没有选择照片
//选择图片超过限制弹出提示
selectionLimitReachedText: "Select up to 9 photos".tr), //最多选择9张照片
);
if (!mounted) return;
setState(() {
img = resultList;
});
//循环把调用后台接口
for (var i = 0; i < img.length; i++) {
// 获取 ByteData
ByteData byteData = await img[i].getByteData();
List<int> imageData = byteData.buffer.asUint8List();
MultipartFile multipartFile = MultipartFile.fromBytes(
imageData,
// 文件名
filename: 'kefu.jpg',
// 文件类型
contentType: MediaType("image", "jpg"),
);
FormData formData = FormData.fromMap({
// 后端接口的参数名称
"Files": multipartFile
});
//把图片文件传给后端
print('============>>>${uploadsApi(formData)}');
}
img.clear();
}
这样就ok了