Ionic Cordova FileUpload 错误：不允许加载本地资源

Question

我是 Ionic 的新手，我正在尝试上传从存储在 Android 文件系统中的相机拍摄的图像：

var ft = new FileTransfer();
console.log('Uploading: ' + fileURL);
ft.upload(fileURL,
  encodeURI("http://192.168.192.62:3000/api/meals/picture"),
  pictureUploaded,
  function(error) {
    console.err(error);
    $ionicLoading.show({template: 'Ooops error uploading picture...'});
    setTimeout(function(){$ionicLoading.hide();}, 3000);
  },
  options);
  
var pictureUploaded = function() {
  console.log('uploaded!');
  $ionicLoading.hide();
};

fileUrl 指向现有图像：file:///data/data/com.ionicframework.nutrilifemobile664547/files/Q2AtO1462636767466.jpg

在 chrome://inspect/#devices 控制台中，我收到以下错误，看起来由于错误，FileOptions 也没有正确发送，这是错误（不允许加载本地资源）：

科尔多瓦版本：6.1.1
离子版本：1.7.14

Answer 1

当您对 Ionic 使用“livereload”选项时会发生这种情况。

尝试在正常模式下运行

Answer 2

另一个可能的原因是您安装了 webview 插件（如https://github.com/ionic-team/cordova-plugin-ionic-webview或只是https://github.com/apache/cordova-plugin-wkwebview-发动机）。 此外，这也不允许使用cdvfile://协议。

Answer 3

对于 ionic webview >3.x，你必须使用 convertFileSrc() 方法。 例如，如果您有一个 myURL 局部变量，例如 file:// 或 /storage。

let win: any = window; // hack ionic/angular compilator
var myURL = win.Ionic.WebView.convertFileSrc(myURL);

Answer 4

可能为时已晚，但是...您可以使用 File 将本机路径转换为 ​​blob，然后使用 URL.createObjectURL(blob) 将 blob 转换为 URL，并将作为 src 传递/设置为您的 html 元素。 这对于生产环境是不必要的，但您可以使用 -lc 将其用于开发。 它可能工作

Answer 5

2018 年 12 月 7 日

这是它在 Ionic 3.9.2应用程序上对我3.9.2的版本。

删除最新版本的webview ，然后：

即ionic cordova plugin add cordova-plugin-ionic-webview@1.2.1

https://github.com/ionic-team/cordova-plugin-ionic-webview/releases/tag/v1.2.1

注意：此版本与normalizeURL()方法一起工作正常。