Flutter Dio 将 Multipart File 对象动态添加到 Map

Posted

技术标签:

【中文标题】Flutter Dio 将 Multipart File 对象动态添加到 Map【英文标题】:Flutter Dio add MultipartFile object to Map dynamicaly 【发布时间】:2021-04-20 09:52:52 【问题描述】:

我有自定义数据:

File avatar = File('path/to/file');

Map<String, dynamic> data = 
  'name': 'John',
  'avatar': avatar

如何将我的数据作为 FormData 对象发送到服务器?

我尝试通过循环数据来创建MultipartFile 类的对象,但在我的情况下,将文件路径作为文件的字符串实例发送。这是我的代码:

data.forEach((key, value) 
  if (value is File) 
    String fileName = value.path.split('/').last;
    data.update(key, (value) async 
      return await MultipartFile.fromFile(value.path, filename: fileName);
    );
  
);

FormData formData = FormData.fromMap(data);
var response = await dio.post("/send", data: formData);

但是使用Dio 我可以上传类似这样的文件:

FormData formData = FormData.fromMap(
    "name": "wendux",
    "age": 25,
    "file": await MultipartFile.fromFile(file.path,filename: fileName)
);

为什么我不能将MultipartFile 动态添加到我的Map 中?

【问题讨论】:

【参考方案1】:

你不是在等待你的数据

await Future.wait(data.map((k, v)
if(v is File)
v = await MultipartFile.fromFile(value.path, filename: fileName);

  return MapEntry(k, v);
));

请关注My async call is returning before list is populated in forEach loop

【讨论】:

status: false, error: message: No file chosen., type: ERROR_FILE_NOT_PROVIDED, code: 10 不发送文件【参考方案2】:

您可以在没有 dio 的情况下发送它。在这里,我编写了整个代码,包括库和响应。请测试下面的代码,因为在我的情况下 dio 不起作用,并且您的情况与我的情况非常相似。

只要send it with simple http request

import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';
import 'package:mime/mime.dart';

   Map<String, String> headers = 
      'Content-Type': 'multipart/form-data',        
    ;

    Map jsonMap = 
      "name": "wendux",
      "age": 25,          
    ;
 String imagePath, // add the image path in varible 

 var request = http.MultipartRequest('POST', Uri.parse(url));
    request.headers.addAll(headers);
    request.files.add(
      http.MultipartFile.fromBytes(
        'orderStatusUpdate',
        utf8.encode(json.encode(jsonMap)),
        contentType: MediaType(
          'application',
          'json',
          'charset': 'utf-8',
        ),
      ),
    );

    if (imagePath != null) 
      final mimeTypeData = lookupMimeType(imagePath).split('/');
      final file = await http.MultipartFile.fromPath('images', imagePath,
          contentType: MediaType(mimeTypeData[0], mimeTypeData[1]));
      print((mimeTypeData[0].toString())); // tells picture or not
      print((mimeTypeData[1].toString())); // return extention
      request.files.add(file);
    

    http.StreamedResponse streamedResponse = await request.send();
    var response = await http.Response.fromStream(streamedResponse);
    print(response.statusCode);
    print(response.body);

【讨论】:

以上是关于Flutter Dio 将 Multipart File 对象动态添加到 Map的主要内容,如果未能解决你的问题,请参考以下文章

Flutter DIO:使用带有 Dio 包的二进制体上传图像

如何使用 Dio 在 Flutter 中调用 API?

Flutter Dio源码分析--Dio介绍

Flutter 如何处理401 未授权的 Dio 拦截器

flutter网络dio框架公共请求参数请求header使用总结

Flutter Web Dio 无法进行简单的 POST