web-dev-qa-db-ja.com

フラッター：HTTP投稿画像のアップロード

私は画像処理にWebサービスを使用していますが、Postmanではうまく機能します。

postman screenshot

今、私はDartと一緒にフラッターでhttpリクエストをしたい：

import 'package:http/http.Dart' as http;

static ocr(File image) async {
    var url = '${API_URL}ocr';
    var bytes = image.readAsBytesSync();

    var response = await http.post(
        url,
        headers:{ "Content-Type":"multipart/form-data" } ,
        body: { "lang":"fas" , "image":bytes},
        encoding: Encoding.getByName("utf-8")
    );

    return response.body;

  }

しかし、画像ファイルをアップロードする方法がわかりません。上記のコードでは例外が発生します：Bad state: Cannot set the body fields of a Request with content-type "multipart/form-data".
リクエストの本文はどのように書くべきですか？

darthttprequestimage-uploadingflutter
17
Mneckoee

回避策は機能するはずです。多くのサーバーは、代わりにapplication/x-www-form-urlencodedを受け入れます（ただし、データのエンコードは適度に非効率的です）。

ただし、これを行うためにDart：httpを使用することは可能です。 http.postを使用する代わりに、http.MultipartFileオブジェクトを使用する必要があります。

Dart documentation から：

var request = new http.MultipartRequest("POST", url);
request.fields['user'] = '[email protected]';
request.files.add(http.MultipartFile.fromPath(
    'package',
    'build/package.tar.gz',
    contentType: new MediaType('application', 'x-tar'),
));
request.send().then((response) {
  if (response.statusCode == 200) print("Uploaded!");
});
17
rmtmckenzie

dio パッケージをお勧めします。 dio はDart/Flutter用の強力なHttpクライアントで、インターセプター、FormData、リクエストのキャンセル、ファイルのダウンロード、タイムアウトなどをサポートします。 。

dio は非常に使いやすいです。この場合、次のことができます。

FormDataの送信：

FormData formData = new FormData.from({
   "name": "wendux",
   "file1": new UploadFileInfo(new File("./upload.jpg"), "upload1.jpg")
});
response = await dio.post("/info", data: formData)

詳細は dio を参照してください。

16
wendu

これは、MultipartRequestクラスを使用して実現できます（ https://docs.flutter.io/flutter/package-http_http/MultipartRequest-class.html ）

必要に応じて、メディアタイプとURIを変更します。

uploadFile() async {
    var postUri = Uri.parse("<APIUrl>");
    var request = new http.MultipartRequest("POST", postUri);
    request.fields['user'] = 'blah';
    request.files.add(new http.MultipartFile.fromBytes('file', await File.fromUri("<path/to/file").readAsBytes(), contentType: new MediaType('image', 'jpeg')))

    request.send().then((response) {
      if (response.statusCode == 200) print("Uploaded!");
    });
  }
6
Peem