用 Xamarin.Forms 開發拍照與上傳照片的功能

這是有人提出的問題，想要使用 Visual Studio + Xamarin.Forms，開發出一個可以使用手機拍照的功能，並且可以將這個照片檔案，上傳到網路上；我剛剛寫了一個小的範例程式，底下的程式碼為這個拍照頁面的 ViewModel 程式碼。

了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

想要使用拍照功能，您需要安裝這兩個 PCLStorage / Xam.Plugin.Media NuGet 套件。
其中，要進行拍照的時候，可以使用這個方法 CrossMedia.Current.TakePhotoAsync 來啟動手機中的照相機，一旦完成照相作業，就可以取得這個照片的檔案路徑。
而要將圖片上傳到遠端伺服器的工作，則使用了 .NET 裡面的 HttpClient 物件，當然，在 PCL 專案內您會找不到這個類別，請您要安裝 Microsoft.Net.Http 這個 NuGet 套件即可使用。

        public MainPageViewModel(IPageDialogService dialogService)
        {

            _dialogService = dialogService;
            拍照Command = new DelegateCommand(async () =>
            {
                // 進行 Plugin.Media 套件的初始化動作
                await CrossMedia.Current.Initialize();

                // 確認這個裝置是否具有拍照的功能
                if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
                {
                    await _dialogService.DisplayAlertAsync("No Camera", ":( No camera available.", "OK");
                    return;
                }

                // 啟動拍照功能，並且儲存到指定的路徑與檔案中
                var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
                {
                    Directory = "Sample",
                    Name = "Sample.jpg"
                });

                if (file == null)
                    return;

                // 讀取剛剛拍照的檔案內容，轉換成為 ImageSource，如此，就可以顯示到螢幕上了
                MyImageSource = ImageSource.FromStream(() =>
                {
                    var stream = file.GetStream();
                    return stream;
                });

                #region 將剛剛拍照的檔案，上傳到網路伺服器上
                using (var client = new HttpClient())
                {
                    using (var content = new MultipartFormDataContent())
                    {
                        // 取得這個圖片檔案的完整路徑
                        var path = file.Path;
                        // 取得這個檔案的最終檔案名稱
                        var filename = Path.GetFileName(path);

                        // 開啟這個圖片檔案，並且讀取其內容
                        using (var fs = file.GetStream())
                        {
                            var streamContent = new StreamContent(fs);
                            streamContent.Headers.Add("Content-Type", "application/octet-stream");
                            streamContent.Headers.Add("Content-Disposition", "form-data; name=\"file\"; filename=\"" + Path.GetFileName(path) + "\"");
                            content.Add(streamContent, "file", filename);

                            // 上傳到遠端伺服器上
                            HttpResponseMessage message = await client.PostAsync("http://YourHost/api/UploadImage", content);

                            var input = message.Content.ReadAsStringAsync();
                            // 更新頁面上的 Image 控制項，顯示出剛剛上傳的圖片內容
                            RemoteImageURL = $"http://YourHost/uploads/{filename}";
                        }
                    }
                }
                #endregion

            });
        }