Cordova App 如何显示本地媒体文件(file://协议的图片或视频)

Cordova + iOS

1、cordova-ios@5及以下 (cordova@9及以下)

app 内的 html 文件是通过 file:// 访问的，本来可以直接显示 file:// 开头的图片或视频
但是 iOS 的 wkwebview 只能展示 file:///private/var/mobile/Containers/Data/Application/{UUID}/tmp/ 下的图片(不知道为什么)。有3个解决办法：

• 把要展示的图片或视频，先复制或移动到 file:///private/var/mobile/Containers/Data/Application/{UUID}/tmp/ 下面
  提示：cordova.file.tempDirectory 变量就是这个 /tmp/ 目录，直接用这个变量吧
• 用 cordova-httpd 插件开启一个本机服务器，
  然后把 file:// 地址转为 http:// 地址再展示，开启本机服务器的代码如下

cordova.plugins.CorHttpd.startServer({
    'www_root': cordova.file.applicationStorageDirectory.replace('file://', ''),
    'localhost_only': true
}, function (url) {
    resolve(url); // 得到形如 http://localhost/
}, function (error) {
    reject(error);
});

比如有个要展示的图片原始路径是 file:///var/mobile/Applications/<UUID>/Library/NoCloud/111.jpg，就转换为
http://localhost/Library/NoCloud/111.jpg 再展示。

• 升级到高版本 cordova(看下面2)

2、cordova-ios@6及以上 (cordova@10及以上)

这个版本的 cordova-ios 支持自定义协议访问html，在 config.xml 里面如下配置后

<preference name="scheme" value="app">
<preference name="hostname" value="localhost">

app 会使用 app://localhost/index.html 来访问应用内页面，此时用 window.WkWebView.convertFilePath('file:///......') 可以把 file:// 转为
app://localhost/_app_file_/...... 的地址，就可以在页面上展示了

window.WkWebView.convertFilePath('file:///var/mobile/Applications/<UUID>/Library/NoCloud/111.jpg');
// 得到 app://localhost/_app_file_/var/mobile/Applications/<UUID>/Library/NoCloud/111.jpg

当然，你也可以不配置 scheme 和 hostname 两个 preference，继续使用上面1的方法

Cordova + Android

1、cordova-android@9及以下(cordova@10及以下)

页面可以直接展示 file://.....

2、cordova-android@10及以上 (cordova@11及以上)

这个版本的 cordova-android 会默认使用自定义协议打开本地html (不配置即默认)

<preference name="scheme" value="https">
<preference name="hostname" value="localhost">

file:// 的图片或视频必须用下面的方法转换后，才可以在页面展示

window.resolveLocalFileSystemURL('file:///data/user/0/com.xxx.yyy/files/......', function (fileEntry) {
    console.log(fileEntry.toURL());
    // 得到的结果形如 https://localhost/__cdvfile_files_/......，可以展示在页面上
}, function(err) {
    console.log(err)
});

如果你不想用自定义协议访问 html，可以如下配置，这样就可以继续用1的方式

<preference name="AndroidInsecureFileModeEnabled" value="true" />