flutter从图库获取本地图片,然后上传到服务器
进入图库选择参考
上传图片参考

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:image_picker/image_picker.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'data/ModifyBaseInfo.dart';

//修改头像
class ImagePickerWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImagePickerState();
  }
}

class _ImagePickerState extends State<ImagePickerWidget> {
  var _imgPath;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFF222222),
        appBar: AppBar(
          leading: Container(
            margin: const EdgeInsets.only(left: 10.0),
            width: 20,
          ),
          title: const Text("修改头像"),
          backgroundColor: const Color(0xFF222222),
          centerTitle: true,
          actions: [
            GestureDetector(
                onTap: () {
                  modifyAvatar();
                },
                child: Center(
                  child: Container(
                    margin: const EdgeInsets.only(right: 15.0),
                    child: const Text("保存"),
                  ),
                )),
          ],
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _ImageView(_imgPath),
              GestureDetector(
                onTap: () {
                  _takePhoto();
                },
                child: Container(
                  padding: const EdgeInsets.only(
                      top: 10, bottom: 10, left: 20, right: 20),
                  decoration: BoxDecoration(color: Colors.blue),
                  child: const Text(
                    "拍照",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              GestureDetector(
                onTap: () {
                  _openGallery();
                },
                child: Container(
                  margin: const EdgeInsets.only(top: 10),
                  padding: const EdgeInsets.only(
                      top: 10, bottom: 10, left: 20, right: 20),
                  decoration: BoxDecoration(color: Colors.blue),
                  child: const Text(
                    "选择图片",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ));
  }

  //更改头像接口
  modifyAvatar() async {
    var apiUrl = "http://47.242.63.216:9527/v1/user/setAvatar";
  //因为_imgPath是File: '/storage/emulated/0/Android/data/com.example.music/files/Pictures/6f9c4827-c211-4b13-9722-ca4e73656ad6729212
  // 8006031112066.jpg',因此要把前面七个和后面一个字符去掉
    String path = _imgPath.toString();
    String path1 = path.substring(7);
    String path2 = path1.substring(0, path1.length - 1);
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String? tokens = prefs.getString("token");

    //参数
    Map<String, dynamic> map = Map();
    //生日从输入框里面获取
    map["head"] = await MultipartFile.fromFile(path2, filename: "23.png");

    FormData formData = FormData.fromMap(map);

    //网络请求添加token请求头
    Response result = await Dio().post(apiUrl,
        data: formData, options: Options(headers: {"x-token": tokens}));
    debugPrint("${result}");

    //json解析
    Map<String, dynamic> nickname = json.decode(result.toString());
    var httpRes = ModifyBaseInfo.fromJson(nickname);
    //如果成功就吐司
    if (httpRes.code == 200) {
      Fluttertoast.showToast(
          msg: "${httpRes.msg}",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          timeInSecForIosWeb: 10,
          backgroundColor: Colors.white,
          textColor: Colors.black,
          fontSize: 16.0);
      //返回个人档案界面
      Navigator.pop(context);
    }
  }

  /*图片控件*/
  Widget _ImageView(imgPath) {
    if (imgPath == null) {
      return const Center(
        child: Text(
          "请选择图片或拍照",
          style: TextStyle(color: Colors.white),
        ),
      );
    } else {
      return Image.file(
        imgPath,
      );
    }
  }

  /*拍照*/
  Future _takePhoto() async {
    // final ImagePicker _picker = ImagePicker();
    var image = await ImagePicker.pickImage(source: ImageSource.camera);

    setState(() {
      _imgPath = image;
      print("$_imgPath");
    });
  }

  /*相册*/
  _openGallery() async {
    // final ImagePicker _picker = ImagePicker();
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imgPath = image;
    });
  }
}

上传到服务器后再通过接口获取图片就是网络地址了,就可以通过显示网络图片的方式去显示图片了

 Container(
              width: 50,
              height: 50,
              margin: EdgeInsets.only(right: 10.0),
              decoration: BoxDecoration(
                image: DecorationImage(
                  image:
                  NetworkImage(mAvatar),
                  fit: BoxFit.cover,
                ),
                borderRadius: BorderRadius.circular(50),
              ),
              ),