Flutter Dio 上传多张图片/多个文件

DIO上传文件数组

问题

在上传文件数组的时候,后端总是收不到文件数组。检查本地数据发现没有问题。
问题出现在FormData对文件的处理上,如果直接用FormData.map处理数据类似下面这样,对于单张/单个文件的上传是没有影响的。

 Map<String, dynamic> formMap = {
          'nickname': nickname,
          'motto': motto,
        };
 formMap['avatar'] = MultipartFile.fromBytes(avatar,
              filename:avatarName ?? '${DateTime.now().millisecondsSinceEpoch}.jpg');

多文件上传时,通过给key加中括号“[]”方式作为文件数组的标记,大多数后台也会通过key[]这种方式来读取。不过RFC中并没有规定多文件上传就必须得加“[]”,所以有时不带“[]”也是可以的,关键在于后台和客户端得一致。
v3.0.0 以后通过Formdata.fromMap()创建的Formdata,如果有文件数组,是默认会给key加上“[]”的
最终编码时会key会为 “files[]”,如果不想添加“[]”,可以通过Formdata的API来构建,如下面解决方法一

解决

采用对FormData的fields和file单独赋值解决,这种不会默认添加"[]"

var formData = FormData();
Map<String, String> fields = {
      'type': message.type,
      'content': message.content,
      'communication': message.communication,
    };
form.fields.addAll(fields.entries);
formData.files.addAll([
    MapEntry(
      "files",
       MultipartFile.fromFileSync("./example/upload.txt",
          filename: "upload.txt"),
    ),
    MapEntry(
      "files",
      MultipartFile.fromFileSync("./example/upload.txt",
          filename: "upload.txt"),
    ),
  ]);

下面这一种是默认添加"[]"的

FormData.fromMap({
    "name": "wendux",
    "age": 25,
    "file": await MultipartFile.fromFile("./text.txt",filename: "upload.txt"),
    "files": [
      await MultipartFile.fromFile("./text1.txt", filename: "text1.txt"),
      await MultipartFile.fromFile("./text2.txt", filename: "text2.txt"),
    ]
 });
response = await dio.post("/info", data: formData);
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter中使用Dio库进行文件上传可以通过以下步骤实现: 首先,确保已经在项目的`pubspec.yaml`文件中添加了Dio库的依赖: ```yaml dependencies: dio: ^4.0.0 ``` 然后,在需要上传文件的地方引入Dio库: ```dart import 'package:dio/dio.dart'; ``` 接下来,创建一个Dio的实例并配置它: ```dart var dio = Dio(); ``` 然后,使用Dio的`FormData`类来创建一个表单数据对象,并添加需要上传文件: ```dart FormData formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(file.path, filename: 'upload.jpg'), }); ``` 这里的`file`是一个`File`对象,表示需要上传文件。 最后,使用Dio的`post`方法发送请求,并将表单数据作为参数传递给它: ```dart Response response = await dio.post( 'https://example.com/upload', data: formData, ); ``` 这里的`https://example.com/upload`是上传文件的接口地址,你需要替换为实际的地址。 完整的示例代码如下: ```dart import 'dart:io'; import 'package:dio/dio.dart'; void main() async { var dio = Dio(); File file = File('path/to/file.jpg'); FormData formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(file.path, filename: 'upload.jpg'), }); Response response = await dio.post( 'https://example.com/upload', data: formData, ); print(response.data); } ``` 通过以上步骤,你就可以使用Dio库在Flutter上传文件了。记得根据实际情况修改代码中的文件路径和上传接口地址。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值