CSDN

MAUI 实现图片上传

2023-04-09 13:52 由 第八种格调的男人 发表于 #移动端开发

MAUI 实现图片上传功能

 

1、Mainpage.xmal 中进行调用 代码如下

<Image x:Name="Image_Upload"  Source="{Binding User.HeaderImg}" />

 <Button Text="上传" Clicked="UploadImage_Clicked"/>

2,创建一个UploadImage类 实现选择图片并上传的方法

 public class UploadImage
    {
        /// <summary>
        /// 选择图片
        /// </summary>
        /// <returns></returns>
        public async Task<FileResult> OpenMediaPickerAsync()
        {
            try
            {
                var result = await MediaPicker.PickPhotoAsync(new MediaPickerOptions
                {
                    Title = "请选择图片"
                });
                if (result.ContentType == "image/png" ||
                    result.ContentType == "image/jpeg" ||
                    result.ContentType == "image/png")
                    return result;
                else
                    await App.Current.MainPage.DisplayAlert("图片类型错误", "请选择新的图片", "确定");
                return null;
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                return null;
            }
        }

        public async Task<Stream> FileResultToStream(FileResult fileResult)
        {
            if (fileResult == null)
                return null;
            return await fileResult.OpenReadAsync();    
        }

        public Stream ByteArrayToStream(byte[] bytes)
        {
            return new MemoryStream(bytes);
        }

        public string ByteBase64ToString(byte[] bytes)
        {
            return Convert.ToBase64String(bytes);
        }

        public byte[] StringToByteBase64(string text)
        {
            return Convert.FromBase64String(text);
        }


        public async Task<ImageFile> Upload(FileResult fileResult)
        {
            byte[] bytes;
            try
            {
                using (var ms=new MemoryStream())
                {
                    var stream = await FileResultToStream(fileResult);
                    stream.CopyTo(ms);
                    bytes=ms.ToArray();
                }
                return new ImageFile
                {
                    ByteBase64 = ByteBase64ToString(bytes),
                    ContentType = fileResult.ContentType,
                    FileName = fileResult.FileName
                };
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                return null;
            }
        }
    }

 

’

3，在mainpage.xmal.cs中引用UploadImage 类实现 UploadImage_Clicked 方法 

 1 private async void UploadImage_Clicked(object sender, EventArgs e)
 2     {
 3         var img = await uploadimage.OpenMediaPickerAsync();
 4         var imagefile = await uploadimage.Upload(img);
 5 
 6         Image_Upload.Source = ImageSource.FromStream(() =>
 7 
 8             uploadimage.ByteArrayToStream(uploadimage.StringToByteBase64(imagefile.ByteBase64))
 9         );
10         11     }

如果需要进一步升级，比如 实现头像上传使用XAML 是否有办法在.NET MAUI(适用于Android和iOS)中实现裁剪图像的功能？

可以使用IImage.Resize方法来调整图像的大小。

Maui中的图像有一个Clip属性，您可以为它设置不同的形状以达到您想要的裁剪效果。

 

热门相关：无量真仙   完美搭档   第一神算：纨绔大小姐   薄先生，情不由己   寂静王冠