web-dev-qa-db-ja.com

Flutterのhttp.MultipartRequestリクエストでファイルをアップロード中に進捗イベントを取得する方法

package:httpからMultipartRequestを使用してファイルをアップロードしています。ファイルのアップロードは成功していますが、アップロード中のファイルの進捗状況を知りたいのですが。どうすればそれを達成できますか？私の現在のコードはこのようなものです

Future submitFile(var report, File file) async {
var uri = Uri.parse(endpoint + "v1/reports");
  var request = http.MultipartRequest("POST", uri);
  await addHeaders(request.headers);
  request.fields.addAll(Report.toMap(report));
  if (file != null)
    request.files.add(await http.MultipartFile.fromPath(
      'report_resource',
      file.path,
    ));

  String response = "";
  await (await request.send()).stream.forEach((message) {
    response = response + String.fromCharCodes(message);
  });
  return response;
}

解決策を検索したところ、 this が見つかりました。そして this の投稿は、リクエストに別のクライアントを使用しているため、私が達成したいものとは多少異なります。

たぶん私は正しい道を探していません。助けていただければ幸いです。

dartflutterdart-http
9
Aawaz Gyawali

一週間ほど待ってから。返事がありませんでした。したがって、私はこの動作を実現するために自分でプラグインを開発しました。パッケージ link 。

使用例：

var request = MultipartRequest();

request.addFile("image", imagePath);

Response response = request.send();

response.onError = () {
  print("Error");
};

response.onComplete = (response) {
  print(response);
};

response.progress.listen((int progress) {
  print("progress from response object " + progress.toString());
});

注：このパッケージはAndroidでのみ機能します。

4
Aawaz Gyawali

私はまだテストしていないので、このクラスを試すことができますか？コンソールに出力されたものを教えてください。

_class MF extends http.MultipartRequest{
  MF(String method, Uri url) : super(method, url);
  @override
  Future<http.StreamedResponse> send() async {

    var client = new Client();
    int byteCount = 0;
    Stream<List<int>> onDone<T>(Stream<List<int>> stream, void onDone()) =>
        stream.transform(new StreamTransformer.fromHandlers(
            handleDone: (sink) {
              sink.close();
              onDone();
        },
          handleData: (data, sink) {
            byteCount += data.length;
            print(byteCount);
            sink.add(data);
          },
        ),
        );

    try {
      var response = await client.send(this);
      var stream = onDone(response.stream, client.close);
      return new StreamedResponse(new ByteStream(stream), response.statusCode,
          contentLength: response.contentLength,
          request: response.request,
          headers: response.headers,
          isRedirect: response.isRedirect,
          persistentConnection: response.persistentConnection,
          reasonPhrase: response.reasonPhrase);
    } catch (_) {
      client.close();
      rethrow;
    }
  }

}
_

使用法：

var request = http.MultipartRequest("POST", uri);の代わりに

使用する：

_var request = MF("POST", uri);
_
1
Saed Nabil

dio パッケージでこれを行うのは非常に簡単です：

Response response;
String filePath="...";
//upload a video
response = await dio.post(
  "/upload",
  data: FormData.from({
    "file": UploadFileInfo(File(filePath), "bee.mp4"),
  }),
  onSendProgress: (received, total) {
    if (total != -1) {
      print((received / total * 100).toStringAsFixed(0) + "%");
    }
  },
);
0
wendu