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