如何使用http上传图片？答案

【问题标题】：How to upload image using http?如何使用http上传图片？
【发布时间】：2019-11-22 03:43:32
【问题描述】：

我正在尝试使用 Flutter 的 http 插件上传图片。

以下是我的代码

Future<ImageUploadModel> postImage(File photoPath) async {
    ImageUploadModel imageUploadModel;

    var request = http.MultipartRequest(
        "POST", Uri.parse("my_api_url"));

    request.files.add(http.MultipartFile.fromBytes(
        "photo", await File.fromUri(Uri.parse(photoPath.path)).readAsBytes(),
        contentType: MediaType('image', 'jpg')));

    final response = await request.send();

    Uint8List responseByteArray = await response.stream.toBytes();

return standardSerializers.deserializeWith(ImageUploadModel.serializer, json.decode(utf8.decode(responseByteArray)));
  }

我尝试使用 Postman 上传图片，并且图片已正确上传。

我已关注堆栈上的链接，但我无法解决错误

Flutter: http post upload an image Flutter how to send multiple files to http post How to send an image to an api in dart/flutter? How to upload image in Flutter?

我得到一个 200 的状态码，但是当我试图从响应中访问任何变量时，我得到一个空字符串。

我尝试过使用 Kotlin 和 Retrofit 的 Native Android，它工作正常

我也尝试了Dio 库

Dio dio = Dio();
    FormData formdata = FormData();

    formdata.add("photo", UploadFileInfo(photoPath, basename(photoPath.path)));
    dio
        .post("My_API_URL",
            data: formdata,
            options: Options(
                method: 'POST',
                responseType: ResponseType.json // or ResponseType.JSON
                ))
        .then((response) {
      print("2 $response");
      return standardSerializers.deserializeWith(
          ImageUploadModel.serializer, json.decode(response.data));
    }).catchError((error) => print("3 $error"));

我不想将我的图像转换为 base64

【问题讨论】：

标签： http flutter dart

【解决方案1】：

响应是一个流，因此是异步的。在获得分配给它的值之前，您将返回 imageUploadModel。试试下面的代码：

Uint8List responseByteArray = await response.stream.toBytes();

return standardSerializers.deserializeWith(ImageUploadModel.serializer, json.decode(utf8.decode(responseByteArray)));

【讨论】：

我收到来自服务器的空响应。我很确定 API 中没有错误，因为我用邮递员检查了它。
那么你的服务器端点也有问题 - 它不应该返回 200 和空响应。在您的服务器与响应一致之前，您将无法准确确定 Flutter 代码中的问题。
我和我的后端工程师谈过，他说图像没有到达服务器
您也可以使用MultipartFile.fromPath，因为您有可用的文件路径，这会稍微缩短您的代码并可能更有效地读取文件 - 但我怀疑这会改变您的问题。如果文件甚至没有到达它，您的端点返回 200 仍然是绝对错误的。
我使用过 MultipartFile.fromPath 甚至使用过 Dio 库，但我面临同样的问题

【解决方案2】：

我终于明白了。以下代码对我有用。

var request = http.MultipartRequest(
        "POST", Uri.parse("MY_API_URL"));
    var multipartFile = await http.MultipartFile.fromPath(
        "photo", photoPath.path,
        contentType: MediaType('image', 'jpeg'));
    request.files.add(multipartFile);
    http.StreamedResponse response = await request.send();
    var responseByteArray = await response.stream.toBytes();

    return ImageUploadModel.fromJson(
        json.decode(utf8.decode(responseByteArray)));

只需根据您的要求更改 MediaType

【讨论】：