上传base64格式图片报HTTP 403错误，如何在APP内正确展示该图片

第一步：修复403上传报错 #

403状态码和图片传输格式没有直接关系，首先检查接口的请求头要求：

• 如果你对接的后端要求接收JSON格式参数，需要在http.post中添加headers配置，同时把body做json序列化，修改你的上传代码如下：

import 'dart:convert';
// ... 其余代码省略
var response = await http.post(
  Uri.parse("http://medbo.digitalicon.in/json/SaveCustomTestBooking"),
  // 添加请求头配置
  headers: {"Content-Type": "application/json"},
  // 对参数做JSON序列化
  body: jsonEncode({
    'VisitDate': _selectedDate,
    'EncUserId': EncUserId,
    'UserFile':  fileContentBase64,
    'Description': testTextController.text
  })
);

• 如果后端要求是表单格式上传，需要确认UserFile字段的接收规则，部分后端会要求base64串携带格式前缀，你可以把编码后的base64串补上前缀再上传：

fileContentBase64 = "data:image/jpeg;base64,${base64.encode(fileContent)}";

第二步：APP内展示图片的实现方式 #

展示本地选取的未上传图片 #

直接用Image.file组件加载你选取的本地文件即可：

// 直接传入你之前选择图片拿到的File对象
Image.file(image!, width: 100, height: 100, fit: BoxFit.cover)

展示后端返回的图片 #

如果上传成功后后端返回了图片的在线地址，直接用Image.network加载地址即可；
如果后端返回的是图片的base64串，用Image.memory解码加载：

// 假设后端返回的base64串存在responseImageBase64变量里
Image.memory(base64Decode(responseImageBase64))

附：Multipart上传的正确实现 #

如果之后你要改用Multipart格式上传（更适合大文件，可避免base64额外增加30%体积的问题），可以参考如下代码：

import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';

Future<void> SaveCustomTestBookingWithMultipart() async {
  if (EncUserId.isNotEmpty) {
    var request = http.MultipartRequest('POST', Uri.parse("http://medbo.digitalicon.in/json/SaveCustomTestBooking"));
    // 添加普通文本参数
    request.fields['VisitDate'] = _selectedDate;
    request.fields['EncUserId'] = EncUserId;
    request.fields['Description'] = testTextController.text;
    // 添加图片文件
    request.files.add(await http.MultipartFile.fromPath(
      'UserFile', 
      image!.path,
      contentType: MediaType('image', 'jpeg'), // 可根据实际图片类型调整
    ));
    // 发送请求
    var response = await request.send();
    if (response.statusCode == 200) {
      // 解析返回结果
      String responseBody = await response.stream.bytesToString();
      var jsonResponse = json.decode(responseBody);
      // 其余业务逻辑和原有代码保持一致即可
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DieticianAfterDateSelectPage(
            rresponse: DieticianEncBookingIdModel.fromJson(jsonResponse),
          )
        )
      );
    } else {
      throw Exception("上传失败");
    }
  }
}

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