如何在 Xamarin 中裁剪后上传图像答案

【问题标题】：How to upload images after cropping in Xamarin如何在 Xamarin 中裁剪后上传图像
【发布时间】：2022-01-02 14:01:43
【问题描述】：

我正在使用ImageCropper 和MediaPlugin 上传图片。但是我在裁剪图像后无法获取图像。

string imagefile;
protected void OnClickedRectangle(object sender, EventArgs e)
{
    new ImageCropper()
    {
        Success = (imageFile) =>
        {
            Device.BeginInvokeOnMainThread(() =>
            {
                view_imageavatar.Source = ImageSource.FromFile(imageFile);

            });
        }
    }.Show(this);
}

async void edit_avatar_Tapped(object sender, EventArgs e)
{
    try
    {
        await CrossMedia.Current.Initialize();
        new ImageCropper()
        {
            PageTitle = "Title",
            AspectRatioX = 1,
            AspectRatioY = 1,
            CropShape = ImageCropper.CropShapeType.Rectangle,
            SelectSourceTitle = "Img",
            TakePhotoTitle = "Take Camera",
            PhotoLibraryTitle = "Img Gallery",
            Success = (imageFile) =>
            {
                Device.BeginInvokeOnMainThread(async() =>
                {
                    view_imageavatar.Source = ImageSource.FromFile(imageFile);
                    imagefile = imageFile;
                    //API Get Images Upload
                    var content = new MultipartFormDataContent();
                    content.Add(new StreamContent(imageFile), "files", imagefile);
                    var httpClient = new HttpClient();
                    var responses = await httpClient.PostAsync("https://xxxxx/api/Upload", content);
                });
            }
        }.Show(this);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("GalleryException:>" + ex);
    }
}

但是我怎样才能上传图片。请注意，view_imageavatar 在裁剪后仍会显示图像。谢了！

更新...

async void edit_avatar_Tapped(object sender, EventArgs e)
{
    try
    {
        await CrossMedia.Current.Initialize();
        new ImageCropper()
        {
            PageTitle = "Title",
            AspectRatioX = 1,
            AspectRatioY = 1,
            CropShape = ImageCropper.CropShapeType.Rectangle,
            SelectSourceTitle = "Img",
            TakePhotoTitle = "Take Camera",
            PhotoLibraryTitle = "Img Gallery",
            Success = (imageFile) =>
            {
                Device.BeginInvokeOnMainThread(async() =>
                {
                    view_imageavatar.Source = ImageSource.FromFile(imageFile);
                    imagefile = imageFile;
                    //API Get Images Upload
                    
                    var fileStream = File.OpenRead(imageFile);
                    var fileContent = new StreamContent(fileStream);

                    var content = new MultipartFormDataContent();
                    content.Add(fileContent, "files", imageFile);
                    var httpClient = new HttpClient();    
                    
                    var responses = await httpClient.PostAsync("https://xxxxxx/api/UploadAvatarUs", content);   
                });
            }
        }.Show(this);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("GalleryException:>" + ex);
    }
}

还是不行？

更新 2

async void edit_avatar_Tapped(object sender, EventArgs e)
{
    try
    {
        await CrossMedia.Current.Initialize();
        new ImageCropper()
        {
            PageTitle = "Title",
            AspectRatioX = 1,
            AspectRatioY = 1,
            CropShape = ImageCropper.CropShapeType.Rectangle,
            SelectSourceTitle = "Img",
            TakePhotoTitle = "Take Camera",
            PhotoLibraryTitle = "Img Gallery",
            Success = (imageFile) =>
            {
                Device.BeginInvokeOnMainThread(async() =>
                {
                    view_imageavatar.Source = ImageSource.FromFile(imageFile);
                    imagefile = imageFile;
                    //API Get Images Upload

                    var upfilebytes = File.ReadAllBytes(imageFile);
                    var ms = new MemoryStream(upfilebytes);
                    var content = new MultipartFormDataContent();
                    content.Add(new StreamContent(ms), "files", imageFile);


                    var httpClient = new HttpClient();    

                    var responses = await httpClient.PostAsync("https://xxxxxx/api/UploadAvatarUs", content);   
                });
            }
        }.Show(this);
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine("GalleryException:>" + ex);
    }
}

-> 还是不能通过API上传照片？

但是我尽量不使用 ImageCropper。我直接上传。

async void edit_avatar_Tapped(object sender, EventArgs e)
{
    var file = await MediaPicker.PickPhotoAsync();
    var content = new MultipartFormDataContent();
    content.Add(new StreamContent(await file.OpenReadAsync()), "files", file.FileName);

    var httpClient = new HttpClient();

    var responses = await httpClient.PostAsync("https://xxxxxx/api/UploadAvatarUs", content);
    string a = responses.StatusCode.ToString();
}

--> 然后就正常了，图片通过API上传

从content.Add(new StreamContent(ms), "files", imageFile); 加载的图像是否不适用于 API？向大家寻求解决方案。

【问题讨论】：

你可以尝试新建一个 MemoryStream 例如 {var upfilebytes = File.ReadAllBytes(imageFile); var ms = new MemoryStream(upfilebytes); content.Add(new StreamContent(ms), "files", imageFile);}
谢谢，但对我来说它仍然不起作用。我在 Update 2 中更新了上述内容。你可以试试看。
我找到了问题所在。在您的代码中，imageFile 只是一个对象（或字符串），而不是您使用 ImageCropper 时的文件。因此，当您尝试将其转换为内容需要的流时，您将失败并且流不包含图像。如果你想在裁剪后发布图片，你可以将它保存到设备中，并通过它的路径发布。
谢谢，我试试

标签： xamarin crop image-upload

【解决方案1】：

您是否真的检查过 StreamContent 将什么作为参数？

它需要Stream 而不是文件路径。

你需要先像这样打开文件：

using var fileStream = File.Open(imageFile);
using var fileContent = new StreamContent(fileStream);

你尝试过类似的方法吗？

【讨论】：

谢谢。但是File.Open(imageFile); -> Open 不起作用。我通过File.OpenRead(imageFile)。这个好吗？我已经更新了以上内容。