获取Flutter Web上传文件的路径

Posted

技术标签:

【中文标题】获取Flutter Web上传文件的路径【英文标题】:Get the path of a file uploaded on Flutter Web 【发布时间】:2020-09-22 10:53:03 【问题描述】:

我面临的主要问题是这个(在网络平台上):

我正在使用 Flutter 开发适用于 android 和 Web 平台的应用程序。我设法上传了一个文件(二维码的图像),但我使用的是 qr_code_tools 插件,我需要提供这样的文件路径:

resultDecodeStr = await QrCodeToolsPlugin.decodeFrom(path);

这是如何上传图片文件的代码(在网络平台上):

Future<File> pickFile() async 
   final Map<String, dynamic> data = ;
   final FileUploadInputElement input = FileUploadInputElement();
   input..accept = 'image/*';
   input.click();
   await input.onChange.first;
   if (input.files.isEmpty) return null;
   return input.files[0];

返回的文件对象有一个属性“relativePath”,它是空的。

在 Android 上我使用类似的东西,但它确实有一个路径,如果没有,我可以获取一个临时目录(使用 path_provider)并创建一个新文件(使用 dart.Io)。但这对 web 来说是不可能的,两个插件(path_provider 和 dart Io)都没有兼容性......

请多多帮助...

【问题讨论】:

将文件上传到 Web 与在设备上不同,因为您获得的 dart:html 文件的副本与 dart:io 文件具有不同的限制/属性。但是,您可以将网络中上传的文件转换为其字节,然后将其传递给您的库,假设它支持直接读取图像字节。 在快速浏览库之后,您似乎无法从字节解码(但也许我从该库的文档中遗漏了一些东西?)。因此,假设您需要网络支持,您要么必须自己修改它,要么使用不同的库。 【参考方案1】:

使用您提供的库,看起来不可能做您想做的事。将文件上传到 Web 与在设备上不同,因为您会获得 dart:html 文件的副本,该文件具有与 dart:io 文件不同的限制/属性。查看该库后,它似乎不支持从字节解码(并且仅从路径解码),由于浏览器的安全性如何工作(您无法访问文件系统,but there is a possibility of this in the future),您无法做到这一点。要在浏览器中工作,它应该允许从字节解码(因为您可以读取 dart:html 文件的字节)。另见:Local file access with javascript

因此,您要么必须分叉库并制作自己的 from-bytes 解码器,要么完全使用不同的库来提供 Web 支持。

【讨论】:

以上是关于获取Flutter Web上传文件的路径的主要内容,如果未能解决你的问题,请参考以下文章

在 Flutter Web 中上传多个文件(图像)

Flutter 上传带有进度条的大文件。 App 和 Web 都支持

Flutter web:如何上传大文件?

将文件上传到 Flutter web 上的 Parse Server

获取上传到 Flask 的文件路径 [重复]

如何在 Flutter for Web 中使用 FileUploadInputElement 上传特定类型的文件