javascript - Phonegap 相机插件在 iOS 中不起作用

Question

我正在使用 Phonegap v6 构建一个应用程序，我正在使用 cordova 相机插件将图片上传到服务器，我已经正确设置了所有内容。

当我在 Phonegap Developer iOS App 中测试它时，它可以工作，我可以选择图像并上传它。

但是当我编译 IPA 文件并将其安装到我的 iPhone 上时，当我点击选择图片按钮时，没有任何反应，但是在我点击它并按任何表单输入后，图库将打开，我可以选择一张图片，但图片不会上传。完全没有反馈。

它再次适用于 Phonegap Mobile 应用程序，但不适用于独立的 IPA。

这是 JS 函数:

// take picture from camera
$('#but_take').click(function(){
  navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
      destinationType: Camera.DestinationType.FILE_URL
  });
});

// upload select
$("#but_select").click(function(){
  navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: true,
      destinationType: Camera.DestinationType.FILE_URI
  });
});

// Change image source and upload photo to server
function onSuccess(imageURI) {
  // Set image source
  var image = document.getElementById('img');
  image.src = imageURI  + '?' + Math.random();

  var options = new FileUploadOptions();
  options.fileKey = "file";
  options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
  options.mimeType = "image/jpeg";

  var params = {};
  params.value1 = localStorage.phone;
  params.value2 = "param";

  options.params = params;
  options.chunkedMode = false;

  var ft = new FileTransfer();
  ft.upload(imageURI, 
"hiddenUrlHere", function(result){
      myApp.alert(result.response, "Profile Updated");
  }, function(error){
      myApp.alert(JSON.stringify(error), "Error");
  }, options);
}
function onFail(message) {
  myApp.alert(message, "Error");
}

HTML 片段:

<img src="img/cam2.jpg" id='img' style="width: 100px; height: 
100px;">

<button id='but_select'>Select photo from Gallery</button>

config.xml 文件:

<?xml version='1.0' encoding='utf-8'?>
<widget id="appIDhere" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>AppName</name>
    <description>
        Senior Project By  name
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        name here
    </author>
    <content src="index.html" />
    <access origin="*" />
    <access origin="content:///*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <preference name="android-minSdkVersion" value="14" />
        <allow-intent href="market:*" />
            <feature name="Camera">
                <param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
            </feature>
    </platform>
    <platform name="ios">
        <access origin="*" />
        <access origin="content:///*" />
        <allow-navigation href="*" />
        <allow-intent href="*" />
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="BackupWebStorage" value="none" />
        <edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
          <string>need to photo library access to upload pictures for posts</string>
        </edit-config>
        <feature name="StatusBar">
            <param name="ios-package" onload="true" value="CDVStatusBar" />
        </feature>
        <feature name="Camera">
            <param name="ios-package" value="CDVCamera" />
        </feature>
        <feature name="Keyboard">
            <param name="ios-package" onload="true" value="CDVKeyboard" />
        </feature>
    </platform>
    <preference name="DisallowOverscroll" value="true" />
    <plugin name="cordova-plugin-console" spec="~1.0.1" />
    <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
    <plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
        <param name="SENDER_ID" value="981753167590" />
    </plugin>
    <plugin name="cordova-plugin-camera" spec="https://github.com/apache/cordova-plugin-camera" />
    <plugin name="cordova-plugin-keyboard" spec="https://github.com/cjpearson/cordova-plugin-keyboard" />
    <plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
</widget>

内容安全元标记:

 <meta http-equiv="Content-Security-Policy" content="default-src *;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

同样，所有插件都已安装并正确链接，一切在 Phonegap iOS 应用程序中都运行良好，但在独立 IPA 中则不然。

有什么我想念的吗？ 也许是一些配置，而不是 Javascript 编码，也许是权限..

顺便说一句，Android APK 也在做同样的事情。

Answer 1

对于相机问题，您必须添加 gap:到 default-src的 Content-Security-Policy元标记。

例子: <meta http-equiv="Content-Security-Policy" content="default-src * gap:;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

对于上传问题，您必须安装 cordova-plugin-file-transfer。

在 Phonegap 开发者应用程序上它可以工作，因为它包含所有插件并且还有 gap:在他们的 Content-Security-Policy元标记。

如果您想查看错误，可以在您的设备中启用远程调试，这将允许检查应用程序并在您的桌面 Safari 上查看错误。