文件上传适用于 Thunder Client 和 Chrome，但不适用于 Dio 或 MultipartRequest

Question

I'm trying to create a flutter app that will allow a user to upload an image and a brief description of said image, and if I test my server code with either Thunder Client or Chrome, it works great, but if I try either the MultipartRequest or Dio from a Flutter app, the image seems to be included in the list of text fields, and the "files" part of the form object is empty. This happens no matter whether I try to upload an image or a small text document. Here is my Flutter code:

ElevatedButton(
  child: const Text("Submit Report"),
  onPressed: () async {
    var dio = Dio();
    var formData = FormData.fromMap({
      "description": "This is a description",
      "location": "This is a location",
      "image": MultipartFile.fromBytes(
          utf8.encode("hello, world"),
          filename: "hello.txt",
          contentType: MediaType("text", "plain")),
    });

    var response = await dio.post(
      "${dotenv.env['SUPABASE_FUNCTIONS_URL']!}/hello-world",
      data: formData,
    );

    debugPrint("***${response.statusCode}***");
  },
)

If I debug and look at the Network tab in Dart's DevTools, I can see the request headers are set like they should be ( Content-Type is multipart/form-data and a boundary is set). My server is just a small Deno function using the multiParser library running on Supabase:

serve(async (req) => {
  const form = await multiParser(req);
  console.log(form);

  return new Response(
    JSON.stringify(form),
    { headers: { "Content-Type": "application/json" } },
  );
})

If I look at the invocation logs on Supabase, the requests coming from Thunder Client and Chrome look fine; the fields and files are populated the way they should be. Meanwhile, coming from Flutter (Dio and MultipartRequest yield the same result), the console.log(form) from above looks like this:

{
  fields: {
    description: "This is a description",
    location: "This is a location",
    'image"; filename="hello.txt"\r\ncontent-type: text/plai': "hello, world"
  },
  files: {}
}

I have tried manually setting various headers (like Content-Type ), tried both the MultipartRequest and Dio approaches, and tried manually tweaking the file being uploaded (content type as well as file body). Also tried both running in an emulator as well as on a real Android phone. The result is always the same.

Answer 1

Used Oak's multipart/form-data parser instead, and it works with everything. Seems to be some sort of incompatibility between MultipartRequest/Dio and multiParser. Thanks to @pskink for troubleshooting with me.