将文件 URL 转换为路径并在 javascript 中发送到文件阅读器答案

【问题标题】：Convert File URL to Path and send to file reader in javascript将文件 URL 转换为路径并在 javascript 中发送到文件阅读器
【发布时间】：2017-06-01 19:41:52
【问题描述】：

我正在使用科尔多瓦相机插件从图库中捕获图片在我的代码下面有它的工作，现在我需要将 URl 传递给文件阅读器，当我将它传递给文件阅读器时它给我错误 成功错误回调：Camera1358190195 = TypeError：无法在“FileReader”上执行“readAsArrayBuffer”：参数 1 不是“Blob”类型，即使“readAsBinarystring”不起作用也需要以下帮助是我的代码。

 //Cordova Camera Plugin 

function PicfromGallery() {
var pictureSource = navigator.camera.PictureSourceType;
var destinationType = navigator.camera.DestinationType;
navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, {
    quality: 50,
    sourceType: pictureSource.PHOTOLIBRARY,
    destinationType: destinationType.FILE_URI,
    targetWidth: 100,
    targetHeight: 100

});
}

function onSuccessEdituserProfileGallery(imageData) {
var smallImage
smallImage = document.getElementById('userProfileImage');
//EditUserProfileImageFilename(imageData);
smallImage.src = imageData;
var userPic = document.getElementById('EdituserProfileImage');
var file = new File(imageData);
OnFileImageEntry(file)
}

//File API
function OnFileImageEntry(file) {
var reader = new FileReader();
reader.onload = function (event) {
    var image = event.target.result;
    image.onload = function () {
       // need to get result
  }
  };
reader.readAsBinaryString(file);
 }

【问题讨论】：

你找到解决办法了吗？
@MahmoudFarahat 我遇到了同样的问题，并在下面发布我的答案。试一试。 :P

标签： javascript jquery cordova

【解决方案1】：

我在cordova-plugin-camera document找到了解决方案。

您可以使用window.resolveLocalFileSystemURL() 解析FileURI，而不是通过new File(imageData) 创建文件对象。

//Cordova Camera Plugin

function PicfromGallery() {
    var pictureSource = navigator.camera.PictureSourceType;
    var destinationType = navigator.camera.DestinationType;
    navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, {
        quality: 50,
        sourceType: pictureSource.PHOTOLIBRARY,
        destinationType: destinationType.FILE_URI,
        targetWidth: 100,
        targetHeight: 100

    });
}

function onSuccessEdituserProfileGallery(imageData) {
    var smallImage;
    smallImage = document.getElementById('userProfileImage');
    smallImage.src = imageData;
    var userPic = document.getElementById('EdituserProfileImage');
    // var file = new File(imageData);
    OnFileImageEntry(imageData);  // Use the fileURI directly.
}

//File API
function OnFileImageEntry(file) {
    window.resolveLocalFileSystemURL(i, function (fileEntry) {
        fileEntry.file(function (file) {
            console.log('Now I have a file obj.');
            var reader = new FileReader();
            reader.onloadend = function (event) {
                var image = event.target.result;
                // Do something with the image
            };
            reader.readAsArrayBuffer(file);

        }, function (e) {
            console.log('Error getting file', e);
        });
    }, function (e) {
        console.log('Error resolving fs url', e);
    });
}

顺便说一句，FileReader.readAsBinaryString() 已弃用。不要使用它！它不再在W3C File API working draft 中。

而且 Mozilla 仍然实现了 readAsBinaryString() 并在 MDN FileApi documentation 中进行了描述。

更多信息请阅读：An answer of fileReader.readAsBinaryString to upload files。

【讨论】：