Cordova

Question

我正在使用图像选择器 (cordova-imagePicker) 插件从图库中获取图像并将它们上传到服务器。

我将 Cordova 6.1.1 与 Android 平台 5.1.1 和以下插件一起使用：

cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-imagepicker 1.1.0 "ImagePicker"
cordova-plugin-inappbrowser 1.4.0 "InAppBrowser"
cordova-plugin-media 2.3.0 "Media"

作为对插件的回调，我使用以下代码将获取的路径转换为文件。请注意，我使用 resolveFile 因为此代码也在桌面中运行ning，在这种情况下，该条目已经是一个文件对象。

var resolveFile = function(entry) {
    if (typeof(entry) === "string") {
        var deferred = $q.defer();
        // first convert to local file system URL
        window.resolveLocalFileSystemURL(entry, function(fileEntry) {
            // now read/convert the file to file object.
            fileEntry.file(function(file) {
                console.log("File converted to file entry");
                deferred.resolve(file);
            }, function(err) {
                console.log("Failed to convert to file entry", err);
                deferred.reject(err);
            });
        }, function(err) {
            console.log("Failed to resolve to file URL", err);
            deferred.reject(err);
        });

        return deferred.promise;
    } else {
        return $q.when(entry);
    }
};

这又用于读取图像并将其传递给将其上传到服务器的函数（$files 是我从插件或输入中获取的内容，如果是 desktop/browser):

var upload = function () {
    if (!$files[currentFile]) {
        onAllFinished();
        return;
    }
    file = $files[currentFile];
    beforeLoad(file);
    fileReader = new FileReader();
    fileReader.onload = onload;
    fileReader.onprogress = progress;
    resolveFile(file).then(function(actualFile) {
        fileReader.readAsDataURL(actualFile);
    });
    currentFile++;
};

在上面，onload 切割图像数据（在字符串中跟在 'base64,' 之后）并将其发送到需要 base64 字符串的上传代码，并使用简单的 [=50= 将数据上传到服务器] 通话：

var uploadPhoto = function(url, photo, callback, error)
    $http.post(url, {
        photo: photo,
    })
    .success(callback)
    .error(function (data, status, headers, config) {
        if (error)
            error(data, status, headers, config);
    });

最后一个函数也适用于相机插件 camera plugin 使用 DATA_URI 目标（我知道，不推荐这样做），它也是 return 一个 base64 字符串（所以我可以重用代码）。

在我看来，文件 reader 输出有问题（我猜）。（我认为）暗示的是小图像（10s kb）加载得很好，以及已经从相机插件准备好的 base64 字符串，但更大的图像（几 MB）通过文件 reader（在 Android，在桌面上没问题）上传已损坏（见下文）。

有人运行遇到过这样的问题吗？谁能提出修复建议（除了更改代码以使用 FileTransfer 插件）？

原图：

上传的（损坏的）图像。请注意，其中一些 read/uploaded 很好：

Answer 1

我在搜索类似问题的解决方案时发现了您的问题。当用作图像源时，来自相机的大图像的 DataURL 会显示，但当我使用 fileReader.readAsDataURL.

时，同一图像已损坏

我已经能够通过使用 fileReader.readAsBinaryData 而不是 fileReader.readAsDataURL 然后将二进制字符串转换为数据 URL 来绕过这个问题。

window.resolveLocalFileSystemURL(imageUri, function done(fileEntry) {
    fileEntry.file(function (fileObj) {
        var image = new Image();
        var reader = new FileReader();
        reader.onloadend = function (e) {
            image.src = "data:image/jpeg;base64," + window.btoa(e.target.result)
        }
        reader.readAsBinaryString(fileObj);
    }
}

希望这可以帮助您找到自己的解决方法。

Cordova - 读取大图像会破坏图像

Cordova - Reading Large Image corrupts image

javascript

android

image

filereader