【问题标题】:Flutter - How to send multiple images in formdataFlutter - 如何在formdata中发送多个图像
【发布时间】:2021-05-29 07:31:50
【问题描述】:

我想使用 dio 和 formData 上传多张图片。我所做的是创建了一个用于将 MultipartFile 存储在数组中的 for 循环,然后将数组传递给“img []”的数据。但是,如果我传递了数组,我无法上传图像,但如果我上传单个图像,它就可以正常工作。

这是我的代码。

 var arr = new List(3);
 
 for (var i=0; i <_tryPath.length; i++) {
    arr[i] = await MultipartFile.fromFile(imageFile[i].path, filename: 
    imageFile[i].path.split('/').last, contentType: new MediaType('image','jpg'));
 };

 print('this is arr = $arr');

 FormData formData = new FormData.fromMap({
    "name": "Max",
    "location": "Paris",
    "age": 21,
    "img[]": arr,
 });

 // dio is in another class here in AuthService.
 AuthService().donateRegister(formData).then((val) async {
    print('successful');
    print(val.data);
 });

你能帮我在formData中上传很多图片吗?我也不想限制 MediaType。如果我还要上传 pdf/docu 或 jpg MediaType,我该怎么办?我会很感激你的时间和回答。谢谢!

【问题讨论】:

    标签: flutter file-upload form-data dio multipartfile


    【解决方案1】:

    您可以使用 for 循环来设置图像列表,如下所示

    我在这里使用multi_image_picker

     Future<int> addMultiImage({MyData myData, List<Asset> files}) async {
        var formData = FormData.fromMap({
         "name": "Max",
        "location": "Paris",
        "age": 21,
        });
        for (int i = 0; i < files.length; i++) {
          var path = await FlutterAbsolutePath.getAbsolutePath(files[i].identifier);
          formData.files.addAll([
            MapEntry("img", await MultipartFile.fromFile(path, filename: path))
          ]);
        }
    
        Response response = await dioHelper.post(
          "myPaths",
          queryParameters: {
           
          },
          data: formData,
        );
    

    【讨论】:

    • 感谢您的帮助!这个逻辑启发了我。我只有一个问题,如果文件是 jpg、png、文档或 pdf,我应该如何添加与其类型对应的文件?
    • 在asset里面,你可以直接作为文件使用List文件,通过文件名中的文件路径就可以得到文件扩展名
    • 嗨!图片为空怎么办?
    • 把它留空,但理想情况下在这里发送数据List&lt;File&gt; files 一定要验证它的正确性
    • 你好@griffins,你能检查一下这个问题吗?它是关于使用 multi_image_picker 上传资产的。太感谢了! stackoverflow.com/questions/68799984/…
    【解决方案2】:

    您可以使用mime 包获取mime 类型。

    import 'package:path/path.dart' as path;
    import 'package:mime/mime.dart';
    
    String getFileName(String _path){
        return path.basename(_path) 
    }
    
    FilePickerResult? result = await FilePicker.platform.pickFiles(
      allowMultiple: true,
      type: FileType.custom,
      allowedExtensions: ['jpg', 'pdf', 'doc'],
    );
    
    if(result != null) {
       List<MultipartFile> files = result.paths.map((path) => 
         MultipartFile.fromFileSync(
            path, 
            filename: getFileName(path),
            contentType: MediaType(
                lookupMimeType(getFileName(path)).split('/')[0],
                lookupMimeType(getFileName(path)).split('/')[1],
            ),
       )
    ).toList();  
       var dio = Dio();
       var formData = FormData.fromMap({
        'name': 'wendux', // other parameter may you need to send
        'age': 25, // other parameter may you need to send
        'files': files,
      });
    
      var response = await dio.post('url', data: formData); 
      // check response status code
      if(response.statusCode == 200){
         // it's uploaded
      }
    
    } else {
       // User canceled the picker
    }
    

    【讨论】:

    • 感谢您提供的信息!它确实帮助我获得了文件类型:)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-08-02
    • 1970-01-01
    • 2019-03-20
    • 2020-08-18
    • 1970-01-01
    相关资源
    最近更新 更多