前言
在Flutter开发中，关于图片上传和展示也是常用必用的操作，尤其是在设置APP用户的头像信息，以及上传背景图的操作。关于Flutter开发中图片的上传和展示也是比较常用的操作，也有对应的组件和插件，但是关于一些引申的需求操作，常规的操作是满足不了需要的，那么本文就来分享一下在实际业务需求中常用的需求：把从相册选中的图片转换成Base64之后再显示，或者展示获取到的Base64的图片。接下来就来分享一下关于相关的操作方法，方便查阅使用。
需求描述
读取到本地相册图片路径后，然后通过路径将图片转换成Base64字符串；或者是从后端获取到Base64字符串的图片然后展示出来。
加载图片示例
分享一下关于需要加载如下的base64图片的格式：
"data:image/png;base64,iVBORw0KGgoAV5f/pguGvrt+kf6Mg2P9xrs01mQbKY6BOxESK79YKdDcu0BOdBZFsFBTGRK9YqTW3T4jUU+TLxV1QE/xiCjRqqVcQyY8HtGgS89uQUJ5bTGoo+txfISGiqMnSCE8bKj8psfEtfLw1Ob+biSDFRXPTpCi…….0LMa9PhPIpEIrw/J9Ec8sbZoZ3mI8FS1uJ0Wyda25AYNmiIl1hbtqSV1I70B+dAU/4dAw64AAAAASUVORK5C"
转换方法
1、加载base64的图片的方式：
Image.memory(
base64.decode(
<所得到的如上述所示的base64图片字符串>.split(',')[1]),
height:50, //设置高度
width:50, //设置宽度
fit: BoxFit.fill, //填充
gaplessPlayback:true, //防止重绘
)2、把选择的图片转换为base64的方式：
void _getImage() async{
XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery);
if (file == null) return;
_avataFile = File(file.path);
Uint8List imageBytes = await _avataFile!.readAsBytes();
String base64 = base64Encode(imageBytes);
String base64Image = "data:image/png;base64," + base64;
print(base64Image);
}注意：使用File类的时候需要导入：import 'dart:io’，并且要异步使用。
3、分享一下关于转换base64的工具类（来源于互联网）：
import 'package:crypto/crypto.dart';
import 'dart:convert';
import 'dart:io';
class Util {
/*
* Md5加密
* */
static String generateMd5(String data) {
var content = new Utf8Encoder().convert(data);
var digest = md5.convert(content);
return digest.toString();
}
/*
* Base64加密
*/
static String encodeBase64(String data) {
var content = utf8.encode(data);
var digest = base64Encode(content);
return digest;
}
/*
* Base64解密
*/
static String decodeBase64(String data) {
return String.fromCharCodes(base64Decode(data));
}
/*
* 通过图片路径将图片转换成Base64字符串
*/
static Future image2Base64(String path) async {
File file = new File(path);
List<int> imageBytes = await file.readAsBytes();
return base64Encode(imageBytes);
}
}示例演示
分享一下实际开发过程中遇到的两个不同的需求操作，一种就是把选择之后的图片转换成Base64字符串之后再上传，另外一种就是从后端获取的Base64字符串图片展示出来，具体如下所示：
1、选择头像并且上传
//选择图片
void _pickImage() async {
XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery);
if (file == null) return;
_avataFile = File(file.path);
int length = await file.length();
double size = length / 1024 / 1024;
Uint8List? bytes;
if (size > 1) {
bytes = await FlutterImageCompress.compressWithFile(file.path,
quality: 50, minWidth: 300, minHeight: 300);
} else {
bytes = await _avataFile!.readAsBytes();
}
//上传头像方法
upImg(bytes);
setState(() { });
}
//上传头像方法
void upImg(Uint8List? imageBytes) async {
if (_avataFile == null) return;
if (imageBytes == null) return;
String base64 = base64Encode(imageBytes);
String base64Image = "data:image/png;base64," + base64;
imgUrl = base64Image;
setState(() {});
Map<String, dynamic> params = {
"Data": base64Image,
};
DioManager.instance.post(User.UpImg_DATA, data: params, mapper: (response) {
if (response['Success'] == true) {
Application.sharedPreferences().then((sharedPrefs) {
String url = base64Image;
sharedPrefs.setString('url', url);
});
}
return response['Data'];
}).listen((res) {
if (res != null) {
getMyImg();
setState(() {});
}
}, onError: (error) {
});
}2、展示base64字符串类型的图片的方法（后端返回的base64字符串图片， 在显示的时候需要转换成Uint8List）
后端返回的base64 字符串图片，显示需要转换成Uint8List，如：Uint8List bytes = Base64Decoder().convert(“图片链接”)。
String imgUrl = "data:image/png;base64,iVBORw0KGgoAV5f/pguGvrt+kf6Mg2P9xrs01mQbKY6BOxESK79YKdDcu0BOdBZFsFBTGRK9YqTW3T4jUU+TLxV1QE/xiCjRqqVcQyY8HtGgS89uQUJ5bTGoo+txfISGiqMnSCE8bKj8psfEtfLw1Ob+biSDFRXPTpCi…….0LMa9PhPIpEIrw/J9Ec8sbZoZ3mI8FS1uJ0Wyda25AYNmiIl1hbtqSV1I70B+dAU/4dAw64AAAAASUVORK5C";
child: imgUrl == null
? Image(
image: AssetImage(
'assets/mine/mine_head_defult.png'),
width: 78)
: Image.memory(
base64.decode(imgUrl!.split(',')[1]), //base64字符串图片转换成Uint8List并且赋值展示
height: 78, //设置高度
width: 78, //设置宽度
fit: BoxFit.fill, //填充
gaplessPlayback: true, //防止重绘
),
最后
通过上面介绍的关于Flutter开发中折叠组件的使用汇总，在Flutter开发中关于折叠效果的实现就游刃有余了，这也是在开发过程中必用的功能，尤其是对于初级开发者来说，更应该掌握这些情况的使用，这里不再赘述。以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
