您的当前位置:首页正文

MAUI 实现图片上传

2024-10-17 来源:个人技术集锦

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属性,您可以为它设置不同的形状以达到您想要的裁剪效果。

Top