使用 Multipart 和 Dio 在 Flutter 上发送多个图像的问题答案

【问题标题】：Issues sending multiple images on Flutter using Multipart and Dio使用 Multipart 和 Dio 在 Flutter 上发送多个图像的问题
【发布时间】：2020-03-26 11:36:43
【问题描述】：

我正在尝试将来自 Flutter 上的 Multi Image Picker 插件的多个文件发送到我的服务器，为此我正在尝试使用 Dio 发送它。但是 Multipart 标签也没有上传文件。如何进行？

    Future<Response> _uploadFile() async {

    var catUpload = jsonEncode(incluirCategoriasParaUpload());
    final FormData formData = FormData.fromMap({
      "action": 'add_Anuncio',
      "filial_id": "1",
      "titulo": tituloControler.text,
      "descricao": descricaoControler.text,
      "categorias": catUpload
    });

    for (var val in listaImagensParaUpload) {
      ByteData byteData = await val.getByteData();
      Uint8List pngBytes = byteData.buffer.asUint8List();
      formData.files.add(
          MapEntry("arquivos",
              await MultipartFile.fromBytes(pngBytes, filename: "teste")
          )
      );
    }

    Dio dio = new Dio();
    dio.interceptors.add(alice.getDioInterceptor());
    return await dio
        .post(URL_WS + WS_PAGE,
        data: formData,
        options: Options(method: 'POST', responseType: ResponseType.json))
        .timeout(Duration(seconds: 2000));
//        .catchError(dioError);


  }

【问题讨论】：

标签： flutter dart multipartform-data dio

【解决方案1】：

您必须将此 for 循环声明为 toList()。

这是一个如何制作的例子。

formData = FormData.fromMap({
  'id': '1',
  'title': 'myTitle',
  'files': [
            for (var file in listFiles)
            {await MultipartFile.fromFile(item.path, filename: 'fileName')}
             .toList()
           ]
});

我正在使用与 MultiPartFile 一起使用的 Dio 库。

【讨论】：

【解决方案2】：

我发布了这个带有 dio 和 image_picker 依赖的解决方案。它肯定会奏效。我为这个解决方案花了 2 天时间。

FormData formData = new FormData.fromMap({
"name": "Max",
"location": "Paris",
"age": 21,
"image[]": [
await MultipartFile.fromFile(
  _imageFile.path,
),
await MultipartFile.fromFile(
  _imageFile.path,
),
], 
});

print(FormData1().then((value) {
print(value);
 }));
response = await dio.post(

"http://143.110.244.110/radius/frontuser/eventsubmitbutton",
data: formData,
onSendProgress: (received, total) {
if (total != -1) {
  print((received / total * 100).toStringAsFixed(0) + '%');
}
},
);
 print(response);

【讨论】：