使用 MultiPartRequest 上传多张图片：内容大小低于指定的 contentLength

Question

I am trying to upload multiple images to the server. I am using http.MultipartRequest.

Main Error Noticed

Unhandled Exception: Content size below specified contentLength. 76 bytes written but expected 130707.

Error

E/flutter (12577): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: Content size below specified contentLength.  76 bytes written but expected 130707.
E/flutter (12577): #0      IOClient.send (package:http/src/io_client.dart:65:7)
E/flutter (12577): <asynchronous suspension>
E/flutter (12577): #1      BaseRequest.send (package:http/src/base_request.dart:116:35)
E/flutter (12577): <asynchronous suspension>
E/flutter (12577): #2      CreateCarDS.uploadImage (package:usedcars_flutter/data_service/create_car_ds.dart:141:34)
E/flutter (12577): #3      _AsyncAwaitCompleter.start (dart:async-patch/async_patch.dart:43:6)
E/flutter (12577): #4      CreateCarDS.uploadImage (package:usedcars_flutter/data_service/create_car_ds.dart:115:44)
E/flutter (12577): #5      AddPageState._editCarNetwork.<anonymous closure>.<anonymous closure> (package:usedcars_flutter/screens/tabs/add_page.dart:1042:36)
E/flutter (12577): #6      State.setState (package:flutter/src/widgets/framework.dart:1141:30)
E/flutter (12577): #7      AddPageState._editCarNetwork.<anonymous closure> (package:usedcars_flutter/screens/tabs/add_page.dart:997:13)
E/flutter (12577): #8      _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter (12577): #9      _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (12577): #10     _FutureListener.handleValue (dart:async/future_impl.dart:137:18)
E/flutter (12577): #11     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:678:45)
E/flutter (12577): #12     Future._propagateToListeners (dart:async/future_impl.dart:707:32)
E/flutter (12577): #13     Future._completeWithValue (dart:async/future_impl.dart:522:5)
E/flutter (12577): #14     _AsyncAwaitCompleter.complete (dart:async-patch/async_patch.dart:30:15)
E/flutter (12577): #15     _completeOnAsyncReturn (dart:async-patch/async_patch.dart:288:13)
E/flutter (12577): #16     CreateCarDS.editCar (package:usedcars_flutter/data_service/create_car_ds.dart)
E/flutter (12577): #17     _asyncThenWrapperHelper.<anonymous closure> (dart:async-patch/async_patch.dart:71:64)
E/flutter (12577): #18     _rootRunUnary (dart:async/zone.dart:1132:38)
E/flutter (12577): #19     _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter (12577): #20     _FutureListener.handleValue (dart:async/future_impl.dart:137:18)
E/flutter (12577): #21     Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:678:45)
E/flutter (12577): #22     Future._propagateToListeners (dart:async/future_impl.dart:707:32)
E/flutter (12577): #23     Future._completeWithValue (dart:async/future_impl.dart:522:5)
E/flutter (12577): #24     Future._asyncComplete.<anonymous closure> (dart:async/future_impl.dart:552:7)
E/flutter (12577): #25     _rootRun (dart:async/zone.dart:1124:13)
E/flutter (12577): #26     _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter (12577): #27     _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter (12577): #28     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter (12577): #29     _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
E/flutter (12577): #30     _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
E/flutter (12577): 

UPLOAD FUNCTION

In this function, I get images as List<File> . I looped through the images List, and added each multipartFile to request.files. I think here I missed some code.

Future<http.StreamedResponse> uploadImages({
    int id,
    List<File> images,
  }) async {

    String apiUrl = CAR_IMAGE_ADD_URL + id.toString() + '/';
    debugPrint(apiUrl);

    var uri = Uri.parse(apiUrl);
    var request = new http.MultipartRequest('POST', uri);
    request.headers.addAll({'Authorization': 'Bearer ' + Profile.instance.accessToken, 'Content-Type': 'multipart/form-data'});

    images.forEach((image) async {
      var stream = new http.ByteStream(DelegatingStream.typed(image.openRead()));
      final length = await image.length();
      var multipartFile = new http.MultipartFile('image', stream, length,
          filename: basename(image.path));
      request.files.add(multipartFile);
    });

    var response = await request.send();
    print(response.statusCode);
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });
    uploadStatusCode = httpStatusCodeFinder(response.statusCode);
    print(response);
    return response;
  }

1. Is my syntax correct?
2. Can I upload multiple images using the above method?

If you have any suggestions or answers, then it will be very helpful.

Answer 1

I would suggest you to use dio. It is a better and more powerful http client.

https://pub.dev/packages/dio

You can easily upload multipart files and additionally receive the progress of the upload. Furthermore you can create a httpservice that contains a static Dio, which will be created one time and accessed by getters. So you only need to put your authorization one time at initialization or set interceptors to the client.

Answer 2

No, you are introducing a subtle error. By making the forEach closure async it is automatically returning a future - and will not get executed inline.

Prefer for to forEach when iterating a list.

  var request = http.MultipartRequest('POST', Uri.parse(apiUrl));
  request.headers.addAll({
    'Authorization': 'Bearer ' + Profile.instance.accessToken,
    'Content-Type': 'multipart/form-data'
  });

  for (var image in images) {
    var stream = http.ByteStream(DelegatingStream.typed(image.openRead()));
    final length = await image.length();
    request.files.add(http.MultipartFile(
      'image', // consider using a unique name per image here
      stream,
      length,
      filename: basename(image.path),
    ));
  }

Answer 3

In my case, i had photo as Uint8List and before request i wanted to create a file.

My problem was missing await on the write function.

await file.writeAsBytes(photo);

So function didn't finish writing probably and request was triggered.