使用 MultiPartRequest 上傳多張圖片：內容大小低於指定的 contentLength

Question

我正在嘗試將多個圖像上傳到服務器。 我正在使用 http.MultipartRequest。

發現主要錯誤

未處理的異常：內容大小低於指定的 contentLength。 已寫入 76 個字節，但預期為 130707。

錯誤

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): 

上傳 FUNCTION

在這個 function 中，我將圖像作為List<File> 。 我遍歷圖像列表，並將每個 multipartFile 添加到 request.files。 我想在這里我錯過了一些代碼。

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. 我的語法正確嗎？
2. 我可以使用上述方法上傳多張圖片嗎？

如果您有任何建議或答案，那將非常有幫助。

Answer 1

我建議你使用 dio。 是一款更好更強大的http客戶端。

https://pub.dev/packages/dio

您可以輕松上傳多部分文件並額外接收上傳進度。 此外，您可以創建一個包含 static Dio 的 httpservice，它將被創建一次並由 getter 訪問。 所以你只需要在初始化時授權一次或者給客戶端設置攔截器。

Answer 2

不，您正在引入一個微妙的錯誤。 通過使forEach閉包async ，它會自動返回一個未來 - 並且不會內聯執行。

迭代列表時更for forEach 。

  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

就我而言，我有照片作為 Uint8List 並且在請求之前我想創建一個文件。

我的問題是在寫入 function 時缺少等待。

await file.writeAsBytes(photo);

所以 function 可能沒有完成寫入並觸發了請求。