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

Posted

技术标签:

【中文标题】Phonegap 相机插件问题 (DestinationType.FILE_URI)【英文标题】:Issue with Phonegap Camera Plugin (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 中测试的代码)

【问题讨论】:

“访问文件”是什么意思?你想把它的数据作为二进制流或类似的东西吗? 【参考方案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 中正确添加了插件详细信息,它就会运行良好。

【讨论】:

以上是关于Phonegap 相机插件问题 (DestinationType.FILE_URI)的主要内容,如果未能解决你的问题,请参考以下文章

相机插件不适用于 Android 的 PhoneGap Build

使用相机插件拍摄新照片时,PhoneGap 应用程序崩溃

iOS 版 Phonegap 相机插件的质量设置有啥影响?

PhoneGap 条码扫描器插件 - 相机关闭

如何在相机 Cordova/Phonegap 上显示文本?

相机插件在 iOS 的 phonegap 应用程序中不起作用