Phonegap 相机插件问题 (DestinationType.FILE_URI)答案

【问题标题】：Issue with Phonegap Camera Plugin (DestinationType.FILE_URI)Phonegap 相机插件问题 (DestinationType.FILE_URI)
【发布时间】：2015-01-31 16:48:20
【问题描述】：

我正在开发一个基于 phonegap 的应用程序，它具有文件传输功能。我正在使用 phonegap 相机插件来选择图像文件。该代码适用于“DestinationType.DATA_URL”。但我无法使用“DestinationType.FILE_URI”访问文件。

DestinationType.DATA_URL 只是给出图像文件的内容。但我必须获取图像文件名和文件路径及其内容。所以我必须在相机选项中使用“DestinationType.FILE_URI”。下面是我的代码，

function attachFile() {
 var pictureSource=navigator.camera.PictureSourceType;
 var cameraOptions = { quality: 49 ,  destinationType:
 Camera.DestinationType.FILE_URI, sourceType: pictureSource.PHOTOLIBRARY };             
 navigator.camera.getPicture(attachSuccess, attachFail, cameraOptions);
}  

function attachSuccess(fileuri) {
 filePath = JSON.stringify(fileuri);
 console.log("FilePath: "+filePath ); 
 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
}

function attachFail() {
 console.log("attach failed");
}

function gotFS(fileSystem) {            

  console.log("gotFS:");      
  var root = "/"+fileSystem.root.name;  
  console.log("root:  "+root); 
  filePath = filePath .substring(filePath.indexOf(root));        

  var imageName = filePath.substring(filePath.lastIndexOf('/'));
  var type = imageName.substring(filePath.indexOf('.'));
  fileSystem.root.getFile(filePath, null, gotFileEntry, fail);  

}

function fail() {
  console.log("** failed **");   
}

function gotFileEntry(fileEntry) {
  console.log("got file entry");
  fileEntry.file(gotFile, fail);
}

function gotFile(file) {
  console.log("got file");       
}

当我调用“attachFile”函数时，获取图片窗口打开，我可以选择图像文件。然后将执行 attachSuccess 回调函数。但我无法使用 FILE URI 访问该文件。 FILE URI 打印如下，

content://media/external/images/media/5490

我想知道如何从这个 URI 中获取“文件名”或“文件对象”。请建议。（在 android Kitkat & Lollipop 中测试的代码）

【问题讨论】：

“访问文件”是什么意思？你想把它的数据作为二进制流或类似的东西吗？

标签： jquery-mobile cordova cordova-plugins

【解决方案1】：

您可以使用 Cordova 的 FileSystem API。下面是一个如何加载图像文件的简单示例：

window.resolveLocalFileSystemURL(filePath, // The file path
    function(fileEntry) { // found the file
        fileEntry.file(function(f) { // got the file
            var reader = new FileReader();

            reader.onloadend = function(evt) {
                var fileContent = reader.result;

                // Do something with the fileContent
                someImage.attr("src", fileContent); // Example
            }

            reader.readAsDataURL(f); // TODO find a way to read it straight to the right format (if there is any)
        }, function(e) { // cannot open file
            console.log("Error opening file: " + e.message);
        });
    },
    function(e) { // file not found
        console.log("Error finding file: " + e.message);
    });

fileContent 是一个包含'data:' + base64 编码字符串的字符串。您也可以使用f 变量来获取文件名。

参考资料：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md

【讨论】：

【解决方案2】：

您获取的 URI 是本机 URI。尝试从您的 cameraOptions 中删除 destinationType 字段，因为插件默认为 FILE_URI。

如果这不起作用，请将destinationType 的值设为1。

我猜 Camera.DestinationType 对象有点搞混了。

附：如果您的最终目标是上传照片，请尝试使用 cordova-plugin-file-transfer。

【讨论】：

【解决方案3】：

你的代码很好。

您应该验证是否在 config.xml 中添加了 File 插件详细信息。这可能是没有正确选择文件详细信息的原因。

<gap:plugin name="org.apache.cordova.file"/>

和/或低于一个，以防您想将文件传输到其他地方。

<gap:plugin name="org.apache.cordova.file-transfer"/>

看看this 和this。两者都使用了destinationType.FILE_URI 并且无法进一步处理，但是一旦在 config.xml 中正确添加了插件详细信息，它就会运行良好。

【讨论】：