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

Question

我正在使用cordova相机插件从图库中捕获图片，它在我的代码下面工作，现在我需要将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);
 }

Answer 1

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

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

//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 .