使用XHR2请求而不是cordova-file-transfer将二进制数据下载到应用程序沙箱中

小编典典

使用XHR2请求而不是cordova-file-transfer将二进制数据下载到应用程序沙箱中

ajax

科尔多瓦正在“废除” cordovan-plugin-
file（即将弃用），请参阅其博客文章。

Cordova开发社区将不再对文件传输插件进行任何工作。如果愿意，您可以继续使用文件传输插件-
在可预见的将来它应该可以正常工作。我们强烈建议Cordova用户过渡到使用符合标准的发送和接收二进制数据的方式。

他们鼓励过渡到使用XHR2请求（其中 responseType 设置为 Blob 或 ArrayBuffer的 XHR请求）。

该博客文章希望提供一个示例，说明如何使用XHR2来获取二进制数据：

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
console.log('file system open: ' + fs.name);
fs.root.getFile('bot.png', { create: true, exclusive: false }, function (fileEntry) {
    console.log('fileEntry is file? ' + fileEntry.isFile.toString());
    var oReq = new XMLHttpRequest();
    // Make sure you add the domain name to the Content-Security-Policy <meta> element.
    oReq.open("GET", "http://cordova.apache.org/static/img/cordova_bot.png", true);
    // Define how you want the XHR data to come back
    oReq.responseType = "blob";
    oReq.onload = function (oEvent) {
        var blob = oReq.response; // Note: not oReq.responseText
        if (blob) {
            // Create a URL based on the blob, and set an <img> tag's src to it.
            var url = window.URL.createObjectURL(blob);
            document.getElementById('bot-img').src = url;
            // Or read the data with a FileReader
            var reader = new FileReader();
            reader.addEventListener("loadend", function() {
               // reader.result contains the contents of blob as text
            });
            reader.readAsText(blob);
        } else console.error('we didnt get an XHR response!');
    };
    oReq.send(null);
}, function (err) { console.error('error getting file! ' + err); });}, function (err) { console.error('error getting persistent fs! ' + err); });

我在理解上面的代码时有一些问题，并且Cordova打算放弃文件传输插件，而倾向于通过Ajax直接获取Blob。

我看到这个权利了吗：
fs.root.getFile创建一个文件。下载成功处理程序（oReq.onload）不会尝试将获取的Blob写入创建的文件。没有明确的理由创建fileEntry。如果我想将获取的Blob保存到创建的FileEntry中，则oReq.onload
可以继续使用FileWriter，但仅适用于小型文件（我最多读取5
MB）（因为Blob在内存中处理）。该博客文章更多地是关于如何一般地获取blob，而不是有关如何将其下载到文件系统中。如果我要下载较大的文件（例如100
MB的文件），则目前不选择退出cordova-plugin-filetransfer。

阅读 234

2020-07-26

共1个答案

小编典典

使用此代码，您可以下载大图像，因为它们是由1MB的块写入的，而不是一次完成整个写入。没有1MB的写入，我将无法写入大于4MB的文件，但与此同时，我已经测试了最大40MB的文件，没有任何问题

 window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, 
    function (dirEntry) {
        console.log('file system open: ' + dirEntry.name);
        createFile(dirEntry, "downloadedImage.jpg");
    }, onFSError);
    function onFSError(error) {
        alert(JSON.stringify(error));
    }
    function createFile(dirEntry, fileName) {
        // Creates a new file or returns the file if it already exists.
        dirEntry.getFile(fileName, {create: true, exclusive: false}, function(fileEntry) {

            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://static.vix.com/es/sites/default/files/styles/large/public/imj/3/30-cosas-de-los-gatos-que-no-sabias-3.jpg', true);
            xhr.responseType = 'blob';

            xhr.onload = function() {
                if (this.status == 200) {
                    var blob = new Blob([this.response], { type: 'image/jpeg' });
                    writeFile(fileEntry, blob);
                }
            };
            xhr.send();
        }, onFSError);
    }

    function writeFile(fileEntry, data) {
       // Create a FileWriter object for our FileEntry (log.txt).
       fileEntry.createWriter(function (fileWriter) {

            fileWriter.onerror = function(e) {
                console.log("Failed file write: " + e.toString());
            };

            function writeFinish() {
                function success(file) {
                    alert("Wrote file with size: " + file.size);
                }
                function fail(error) {
                    alert("Unable to retrieve file properties: " + error.code);
                }
                fileEntry.file(success, fail);
            }
            var written = 0;
            var BLOCK_SIZE = 1*1024*1024; // write 1M every time of write
            function writeNext(cbFinish) {
                fileWriter.onwrite = function(evt) {
                    if (written < data.size)
                        writeNext(cbFinish);
                    else
                        cbFinish();
                };
                if (written) fileWriter.seek(fileWriter.length);
                fileWriter.write(data.slice(written, written + Math.min(BLOCK_SIZE, data.size - written)));
                written += Math.min(BLOCK_SIZE, data.size - written);
            }
            writeNext(writeFinish);
        });
    }

2020-07-26