本文章的目的

• Cocos Creator WEB平台如何上传文件
• Cocos Creator WEB平台如何下载

H5平台如何把本地文件上传到内存中

首先利用 HTML 中的 input 把文本文件上传到内存中，

/**
 * 上传一个文件
 * @param {data: string[]} callback 下标0: 表示文件的名字, 下标1:表示文件的内容
 */
static readFilSync(callback: (data: any) => void) {
    let fileMap = {};
    let readFile = function (files, index) {
        if (index >= files.length) {
            callback && callback(fileMap);
            return;
        }
        let reader = new FileReader();//这是核心,读取操作就是由它完成.
        reader["fileName"] = files[index]["name"];
        reader["webkitRelativePath"] = files[index]["webkitRelativePath"]
        reader.readAsText(files[index]);//读取文件的内容,也可以读取文件的URL
        reader.onload = function (data) {
            let results = reader["webkitRelativePath"].split("/");
            results.splice(0, 1);
            let fileName = results.join("/");
            fileMap[`${fileName}`] = this.result;
            readFile(files, ++index);
        };
    };
    let tmpSelectFile = function (data) {
        readFile(data.currentTarget.files, 0);
    };
    let fileInput = document.getElementById("fileInput");
    if (!fileInput) {
        fileInput = document.createElement("input");
        fileInput.setAttribute("id", "fileInput");
        fileInput.setAttribute("type", "file");
    }
    fileInput.addEventListener('change', tmpSelectFile);
    fileInput.click();
}

如果有多个文件的话，上面的代码肯定满足不了需求。可以给input标签增加相应 multiple 的属性，让其支持上传多个文件

fileInput.setAttribute("multiple", "multiple");

H5平台如何把内存中的数据下载到本地

利用HTML5中的Blob对象用于组织和存放即将下载的数据

在利用 document对象来操作 HMTL a 标签来下载文件

/**
 * 下载一个文件到本地
 * @param {string} fileName 文件的名字 
 * @param {string} fileObj 文件的内容
 */
static writeFile(fileName, fileObj) {
    let textFileAsBlob = new Blob([fileObj], { type: 'application/json' });
    let downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        //  downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }
    downloadLink.click();
}

H5平台如何把内存中的多条数据打包成zip并下载到本地

首先利用 npm 命令 去下载jszip

npm install jszip --save
npm install @types/jszip --save

先利用 jszip 把内存中的多条数据打包成一个zip数据包

再利用 Blob 对象组织即将要下载的数据

最后用HTML中的 a 标签 把数据下载下来

/**
 * 把多个文件写入一个zip压缩包,并下载到本地
 * @param {  {[key: string]: string} } zipObj  {}["文件名字"] =    文件内容字符串
 * @param zipName 压缩文件的名字
 */
static writeZipAsync(zipObj: { [key: string]: string }, zipName) {
    let JSZip = require("jszip");
    var zip = new JSZip();
    for (let key in zipObj) {
        zip.file(key, zipObj[key]);
    }
    zip.generateAsync({ type: "blob" }).then(function (content) {
        let textFileAsBlob = new Blob([content], { type: 'application/json' });
        let downloadLink = document.createElement("a");
        downloadLink.download = zipName;
        downloadLink.innerHTML = "Download File";
        if (window.webkitURL != null) {
            // Chrome allows the link to be clicked
            // without actually adding it to the DOM.
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        else {
            // Firefox requires the link to be added to the DOM
            // before it can be clicked.
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            //  downloadLink.onclick = destroyClickedElement;
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    });
}

H5平台如何把本地的zip文件读取到内存中

首先利用 HTML 中的 input 把文本文件上传到内存中，
再利用 jszip 把上传的文件内容解压出来

/**
 * 读取一个zip 压缩文件
 * @param {data: string[]} callback 下标0: 表示文件的名字, 下标1:表示文件的内容
 */
static readZipSync(callback: (data: any) => void) {
    let fileMap = {};
    let readFile = function (files, index) {
        let keys = Object.keys(files);
        if (index >= keys.length) {
            callback && callback(fileMap);
            return;
        }
        files[keys[index]].async("string").then((data) => {
            fileMap[files[keys[index]].name] = data;
            readFile(files, ++index);  
        })
    };
    let tmpSelectFile = function (data) {
        let reader = new FileReader();//这是核心,读取操作就是由它完成.
        reader["fileName"] = data.currentTarget.files[0]["name"];
        reader["webkitRelativePath"] = data.currentTarget.files[0]["webkitRelativePath"]
        reader.readAsArrayBuffer(data.currentTarget.files[0]);//读取文件的内容,也可以读取文件的URL
        reader.onload = function (data) {
            let JSZip = require('jszip');
            let  zipfile = new JSZip();
            zipfile.loadAsync(this.result).then((zip) => {
                readFile(zip.files, 0);
            }); 
        };
    };
    let fileInput = document.getElementById("fileInput");
    if (!fileInput) {
        fileInput = document.createElement("input");
        fileInput.setAttribute("id", "fileInput");
        fileInput.setAttribute("type", "file");
    }
    fileInput.addEventListener('change', tmpSelectFile);
    fileInput.click();
}