+关注继续查看

前言

在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”,欢迎关注!

《Flutter企业级应用开发实战手册》电子版地址
随着 Flutter 在国内逐步应用,许多开发者逐渐认识到它的玄妙之处。开发者在娴熟地使用 Flutter 进行开发并提高研发效率的同时,也面临着不小的挑战。
《Flutter企业级应用开发实战手册》电子版下载地址
随着 Flutter 在国内逐步应用,许多开发者逐渐认识到它的玄妙之处。开发者在娴熟地使用 Flutter 进行开发并提高研发效率的同时,也面临着不小的挑战。
Flutter 开发一个常用的登录界面
登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。