flutter 文件上传在Thunder Client和Chrome中有效,但在Dio或MultipartRequest中无效

dz6r00yl  于 2022-12-30  发布在  Flutter
关注(0)|答案(1)|浏览(139)

我正在尝试创建一个flutter应用程序,允许用户上传图像和图像的简要描述,如果我用Thunder Client或Chrome测试我的服务器代码,效果很好,但如果我尝试使用Flutter应用程序中的MultipartRequest或Dio,图像似乎包含在文本字段列表中,而form对象的“files”部分是空的。无论我试图上传一张图片还是一个小文本文档,都会发生这种情况。下面是我的Flutter代码:

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}***");
  },
)

如果我调试并查看Dart的DevTools中的Network选项卡,我可以看到请求头被设置为应该的样子(Content-Typemultipart/form-data,并且设置了边界)。我的服务器只是一个小的Deno函数,它使用运行在Supabase上的multiParser库:

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

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

如果我查看Supabase上的调用日志,来自Thunder Client和Chrome的请求看起来很正常;字段和文件以应有的方式填充。同时,来自Flutter(Dio和MultipartRequest产生相同的结果),上面的console.log(form)如下所示:

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

我尝试过手动设置各种头文件(比如Content-Type),尝试过MultipartRequest和Dio方法,尝试过手动调整上传的文件(内容类型和文件体),也尝试过在模拟器和真实的的Android手机上运行,结果总是一样的。

cbeh67ev

cbeh67ev1#

我用了Oak的multipart/form-data解析器,它可以处理任何事情。看起来MultipartRequest/Dio和multiParser之间有一些不兼容。感谢@pskink和我一起解决问题。

相关问题