Xamarin.Forms ファイルをMultipartでPostする

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

  10. Xamarin ファイル選択

1.ファイルのアップロード

GAE側で、Google Cloud Vision APIを使って、OCRを実行するAPIを作成 し、Xamarinでファイルを選択することが出来たので、APIに、Multipart Postでファイルを送信し、OCRの結果を得る。

https://docs.microsoft.com/en-us/dotnet/api/system.net.webclient.uploadfile?

https://stackoverflow.com/questions/19954287/how-to-upload-file-to-server-with-http-post-multipart-form-data

この辺りを参考に。

private async void FilePick()
{
    var file = await CrossFilePicker.Current.PickFile();

    if (file != null)
    {
        byte[] fileBytes = null;
        using(MemoryStream ms = new MemoryStream()) {
            byte[] buf = new byte[1024 * 16];
            int read;
            var inputStream = file.GetStream();
            while ((read = inputStream.Read(buf,0,buf.Length)) > 0)
            {
                ms.Write(buf, 0, read);
            }

            fileBytes = ms.ToArray();
        }
        if (fileBytes != null)
        {
            string uri = "https://favophrase.com/api/upload-file";

            HttpClient httpClient = new HttpClient();
            MultipartFormDataContent form = new MultipartFormDataContent();

            form.Add(new StringContent(file.FileName), "fileName");

            form.Add(new ByteArrayContent(fileBytes, 0, fileBytes.Length), "file", file.FilePath);
            HttpResponseMessage response = await httpClient.PostAsync(uri, form);

            response.EnsureSuccessStatusCode();
            httpClient.Dispose();

            string sd = response.Content.ReadAsStringAsync().Result;

            await Page.DisplayAlert("Uploaded File.", sd, "OK");
        }
    }
}

2.実行結果

Android,iPhone,UWP にて、それぞれ、ファイル選択から、ファイルアップロード、OCRの結果を表示できた。

xamarin_fileupload_android


xamarin_fileupload_ios

xamarin_fileupload_uwp

いい感じ。