javascript - 如何在 Android 上的 phonegap 中从本地文件创建 Blob

Question

我正在尝试从 android 上的 phonegap 应用程序将文件上传到 amazon S3。我已经有了适用于 iOS 的代码。但是我很难让它在安卓上运行。问题是我不知道如何正确创建 Blob 对象。在 iOS 上我只是这样做:

blob = new Blob([evt.target.result], {type: "image/png"});

上传好了。在 android 上不能使用 Blob 构造函数(参见 here )，但我无法使用 WebKitBlobBuilder 将文件数据正确地放入 Blob 对象中。

这是我检索文件数据的方法，有两种方法并且都没有错误地通过，但是在 S3 上生成的文件是空:

window.resolveLocalFileSystemURI(url, function(e){
    e.file(function(f){
        var reader = new FileReader();
        reader.onloadend = function(evt) {
        // This way also did not work:
        //    var builder = new WebKitBlobBuilder();
        //    builder.append(evt.target.result);
        //    blob = builder.getBlob("image/png");

            var blob = null;
            var builder = new WebKitBlobBuilder();
            for(var i = 0; i < evt.target.result.length; i++){
                builder.append(evt.target.result[i]);
            }
            blob = builder.getBlob("image/png");
            uploadToS3(filename, s3url, blob);
        };
        reader.readAsArrayBuffer(f);
    });
}, function(e){
    console.log("error getting file");
    error();
});

此外，这里是 uploadToS3 函数:

var uploadToS3 = function(filename, s3url, fileData) {
    var xhr = createCORSRequest('PUT', s3url);
    if(!xhr) {
        console.log('CORS not supported');
        error();
        return;
    }
    xhr.onload = function () {
        if(xhr.status == 200) {
            console.log('100% - Upload completed.');
            callback(filename); //callback defined in outer context
        }
        else {
            console.log('0% - Upload error: ' + xhr.status);
            console.log(xhr.responseText);
            error();
        }
    };
    xhr.onerror = function () {
        console.log(0, 'XHR error.');
        error();
    };
    xhr.upload.onprogress = function (e) {
        if(e.lengthComputable) {
            var percentLoaded = Math.round((e.loaded / e.total) * 100);
            var label = (percentLoaded == 100) ? 'Finalizing.' : 'Uploading.';
            console.log(percentLoaded + "% - " + label);
        }
    };
    xhr.setRequestHeader('Content-Type', "image/png");
    //xhr.setRequestHeader('x-amz-acl', 'public-read');
    xhr.send(fileData);
};

编辑:我通过记录 evt.target.result.byteLength 检查了文件大小，没问题，所以 evt.target.result 包含图像数据。上传仍然存在问题 - 我检查了 s3 存储并且文件大小为 0，所以我没有正确构建 Blob。

Answer 1

所以这毕竟是一个 android 错误，至少从 2012 年 11 月起就没有修复。

这是我找到的一篇与我的问题直接相关的文章:https://ghinda.net/article/jpeg-blob-ajax-android/

它还为该错误提供了一种解决方法，即直接发送 ArrayBuffer，而不创建 Blob。在我的例子中，我必须直接发送 evt.target.result。