Flutter用户头像点击保存后未更新问题排查求助

我用部署在GCP Ubuntu虚拟机上的Django 3.2 REST API对接Flutter应用，API的media目录在settings.py中配置为根目录下的./media。现在遇到用户头像无法更新的问题：选择图片后前端头像框能正常显示所选图片，但点击保存发送HTTP PATCH请求后，后端返回成功，头像却变回空状态，后端用户认证目录下也没有头像信息，已确认是Flutter端未将图片发送至后端。

Flutter头像组件代码 #

enum MYAvatarSize { extraSmall, small, medium, large, extraLarge }

enum MYAvatarType { user, community }

class MYAvatar extends StatelessWidget {
  final String? avatarUrl;
  final PlatformFile? avatarFile;
  final MYAvatarSize? size;
  final VoidCallback? onPressed;
  final double? borderWidth;
  final bool isZoomable;
  final double? borderRadius;
  final double? customSize;

  static const double AVATAR_SIZE_EXTRA_SMALL = 20.0;
  static const double AVATAR_SIZE_SMALL = 30.0;
  static const double AVATAR_SIZE_MEDIUM = 40.0;
  static const double AVATAR_SIZE_LARGE = 80.0;
  static const double AVATAR_SIZE_EXTRA_LARGE = 100.0;
  static const String DEFAULT_AVATAR_ASSET =
      'assets/images/fallbacks/avatar-fallback.jpg';
  static const double avatarBorderRadius = 10.0;

  static double getAvatarSize(MYAvatarSize size) {
    late double avatarSize;

    switch (size) {
      case MYAvatarSize.extraSmall:
        avatarSize = AVATAR_SIZE_EXTRA_SMALL;
        break;
      case MYAvatarSize.small:
        avatarSize = AVATAR_SIZE_SMALL;
        break;
      case MYAvatarSize.medium:
        avatarSize = AVATAR_SIZE_MEDIUM;
        break;
      case MYAvatarSize.large:
        avatarSize = AVATAR_SIZE_LARGE;
        break;
      case MYAvatarSize.extraLarge:
        avatarSize = AVATAR_SIZE_EXTRA_LARGE;
        break;
    }

    return avatarSize;
  }

  const MYAvatar(
      {Key? key, this.avatarUrl,
      this.size = MYAvatarSize.small,
      this.onPressed,
      this.avatarFile,
      this.borderWidth,
      this.isZoomable = false,
      this.borderRadius,
      this.customSize}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    MYAvatarSize finalSize = size ?? MYAvatarSize.small;
    double avatarSize = customSize ?? getAvatarSize(finalSize);

    Widget finalAvatarImage;

    if (avatarFile != null) {
      finalAvatarImage = FadeInImage(
        fit: BoxFit.cover,
        height: avatarSize,
        width: avatarSize,
        placeholder: const AssetImage(DEFAULT_AVATAR_ASSET),
        image: FileImage(File(avatarFile!.path!)),

      );
    } else if (avatarUrl != null) {
      finalAvatarImage = Image(
          height: avatarSize,
          width: avatarSize,
          fit: BoxFit.cover,
          image: AdvancedNetworkImage(avatarUrl!,
              useDiskCache: true,
              fallbackAssetImage: DEFAULT_AVATAR_ASSET,
              retryLimit: 0));

      if (isZoomable) {
        finalAvatarImage = GestureDetector(
          child: finalAvatarImage,
          onTap: () {
            MyappNetworkProviderState myappProvider =
                MyappNetworkProvider.of(context);
            myappProvider.dialogService.showZoomablePhotoBoxView(
                imageUrl: avatarUrl!, context: context);
          },
        );
      }
    } else {
      finalAvatarImage = _getAvatarPlaceholder(avatarSize);
    }

    Widget avatar = ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius ?? avatarBorderRadius),
      child: finalAvatarImage,
    );

    if (onPressed == null) return avatar;

    return GestureDetector(
      onTap: onPressed,
      child: avatar,
    );
  }

  Widget _getAvatarPlaceholder(double avatarSize) {
    return Image.asset(
      DEFAULT_AVATAR_ASSET,
      height: avatarSize,
      width: avatarSize,
    );
  }
}

初始空安全错误 #

最初代码存在空安全相关错误：

The argument type 'String?' can't be assigned to the parameter type 'String' ---> for both Lines 1 & 2

The property 'path' can't be unconditionally accessed because the receiver can be 'null'.
Try making the access conditional (using '?.') or adding a null check to the target ('!') ---> for Line 1.

我添加!进行了快速修复，修复后的代码片段：

image: FileImage(File(avatarFile!.path!))
image: AdvancedNetworkImage(avatarUrl!,...)

修复后无编译错误，但头像仍无法更新，请求协助排查。

排查与解决建议 #

1. 检查上传请求的构造逻辑 #

MYAvatar仅负责图片显示，真正的上传逻辑在父页面/提交按钮回调中，需确认：

• 是否将avatarFile转换为MultipartFile（Django要求接收multipart/form-data格式）
• PATCH请求的Content-Type是否设置为multipart/form-data
• 请求体字段名是否与Django序列化器的图片字段一致（比如avatar）

示例正确上传逻辑（基于dio库）：

import 'package:dio/dio.dart';

Future<void> updateAvatar(PlatformFile file) async {
  final formData = FormData.fromMap({
    'avatar': await MultipartFile.fromFile(
      file.path!,
      filename: file.name,
    ),
  });
  
  try {
    await Dio().patch(
      'https://your-api-domain/user/profile/',
      data: formData,
      options: Options(
        headers: {'Authorization': 'Bearer ${yourAuthToken}'},
      ),
    );
  } catch (e) {
    // 处理错误
  }
}

2. 确认avatarFile的状态管理 #

• 检查选择图片后，avatarFile是否正确存入状态管理（如Provider、StatefulWidget的state）
• 提交前打印avatarFile?.path，确认拿到的是非空值

3. 后端接收逻辑验证 #

• 查看Django日志，确认是否接收到文件字段
• 检查Django序列化器是否配置了ImageField并允许更新
• 确认GCP虚拟机上的MEDIA_ROOT目录有写入权限

4. 优化空安全处理 #

用!强制解包存在运行时崩溃风险，建议改为更安全的空判断：

if (avatarFile != null && avatarFile.path != null) {
  finalAvatarImage = FadeInImage(
    fit: BoxFit.cover,
    height: avatarSize,
    width: avatarSize,
    placeholder: const AssetImage(DEFAULT_AVATAR_ASSET),
    image: FileImage(File(avatarFile.path!)),
  );
}

内容的提问来源于stack exchange，提问作者Ananth