Flutter： 把本地相册图片转换成Base64的方法

前言

在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;


}

注意：使用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开发中关于折叠效果的实现就游刃有余了，这也是在开发过程中必用的功能，尤其是对于初级开发者来说，更应该掌握这些情况的使用，所以很重要，需要掌握住。