使用带有 Ionic 的文件输入的文件上传（使用本机文件浏览器选择文件）

Posted 2023-03-05

【中文标题】使用带有 Ionic 的文件输入的文件上传（使用本机文件浏览器选择文件）

【英文标题】：File Upload using file input with Ionic (Selection of file using Native File Browser )

【发布时间】：2016-12-01 01:17:03

【问题描述】：

在我的 ionic 应用标记中，我有

<input type="file" id="file" />

在我的控制器中，我正在从文件管理器中获取选择文件

 fileinput.addEventListener('change', function (event) 
        var file = event.target.files[0];
        console.log(file);

当我上传图像或视频时，这很有效。如果使用下图中的文件管理器选项也可以。但我在从快速链接列表上传音频或使用第三方浏览器获取文件时遇到问题。在大多数其他情况下，文件对象被返回，我可以成功上传它。

但是我遇到了两个问题

1) 当我使用侧边栏上的快速链接上传音频文件时，该文件列出了所有音频文件及其名称。单击此列表中的文件时，我没有得到文件对象中的扩展名或内容类型我需要的。但是，如果我使用文件管理器选项并导航到文件，则同样有效。就好像音频快速链接列表只有很少的细节，没有扩展或内容类型的细节。

2) 如果我使用第三方资源管理器（如 ES 资源管理器）或图像侧边栏中显示的音乐应用程序，则应用程序崩溃并停止。

那么有没有其他方法可以导航到要从应用程序上传的文件，或者我做错了什么。 ImagePicker 科尔多瓦插件的 .只选择图像的限制是问题，否则会使用它

【问题讨论】：

我面临同样的问题。你找到答案了吗

@sam 是的，我用过github.com/don/cordova-filechooser。这工作得很好..给我返回了本机路径..我可以稍后转换

我用了同一个插件，后来用cordovafilepath插件解决了。谢谢大佬

检查sd卡权限。发生这种情况是由于未授予 sd 卡权限。

使用 html 输入有什么解决方法吗？我不想使用 cordova-filechooser 插件。不使用插件有什么办法吗？当我尝试上传 pdf 文件时，我没有得到内容类型。 ios 和 android 都需要

【参考方案1】：

Android 没有给出使用上述方法的原始文件名和文件类型，这是来自 android 的安全问题。因此，我必须制定以下解决方案来检索正确的文件名、文件类型、文件大小和 base64 中的文件数据。

您可以按照我的解决方案here。