[Cocos Creator] 本地文件加載系列一：本地文件讀取（web模式)

不瞎BB了，直接擼代碼

ts代碼

// TS
// 使用input調起文件選擇窗口
openLocalFile(accept: string, callback: (file: File) => void) {
        let inputEl: HTMLInputElement = <HTMLInputElement>document.getElementById('file_input');
        if (!inputEl) {
            // console.log('xxxxxx createElement input');
            inputEl = document.createElement('input');
            inputEl.id = 'file_input';
            inputEl.setAttribute('id', 'file_input');
            inputEl.setAttribute('type', 'file');
            inputEl.setAttribute('class', 'fileToUpload');
            inputEl.style.opacity = '0';
            inputEl.style.position = 'absolute';
            inputEl.setAttribute('left', '-999px');
            document.body.appendChild(inputEl);
        }

        accept = accept || ".*";
        inputEl.setAttribute('accept', accept);

        // inputEl.addEventListener('change', (event) => {
        //     console.log('xxx onchange1', event, inputEl.value);
        // });
        inputEl.onchange = (event) => {
            // console.log('xxx onchange2', event, inputEl.files);
            let files = inputEl.files
            if (files && files.length > 0) {
                var file = files[0];
                if (callback) callback(file);
            }
        }
        inputEl.click();
    }

// 讀取文件方式
export enum READ_FILE_TYPE {
    DATA_URL,// readAsDataURL, base64
    TEXT,// readAsText
    BINARY,// readAsBinaryString
    ARRAYBUFFER,// readAsArrayBuffer
}
// 讀取本地文件數據
readLocalFile(file: File, readType: READ_FILE_TYPE, callback: (result: string | ArrayBuffer) => void) {
        var reader = new FileReader();
        reader.onload = function (event) {
            if (callback) {
                if (reader.readyState == FileReader.DONE) {
                    // console.log('xxx FileReader', event, reader.result);
                    callback(reader.result);
                } else {
                    callback(null);
                }
            }
        };
        switch (readType) {
            case READ_FILE_TYPE.DATA_URL:
                reader.readAsDataURL(file);
                break;
            case READ_FILE_TYPE.TEXT:
                reader.readAsText(file);   //作爲字符串讀出
                //reader.readAsText(file,'gb2312');   //默認是用utf-8格式輸出的，想指定輸出格式就再添加一個參數，像txt的ANSI格式只能用國標才能顯示出來
                break;
            case READ_FILE_TYPE.BINARY:
                reader.readAsBinaryString(file);
                break;
            case READ_FILE_TYPE.ARRAYBUFFER:
                reader.readAsArrayBuffer(file);
                break;
        }
    }


// base64生成Texture2D
base64ToTexture2D(base64: string, callback: (this: void, texture: cc.Texture2D) => void) {
        if (base64) {
            var img = new Image();
            img.onload = function () {
                var texture = new cc.Texture2D();
                texture.initWithElement(img);
                texture.handleLoadedTexture();
                if (callback) callback(texture);
            }
            img.onerror = function (err) {
            }
            if ((<any>base64).startsWith !== undefined && (<any>base64).startsWith("data:image")) {
                img.src = base64;
            } else {
                img.src = "data:image/png;base64," + base64;
            }
        } else {
            if (callback) callback(null);
        }
    }

// base64生成cc.SpriteFrame
base64ToSpriteFrame(base64: string, callback: (this: void, spriteFrame: cc.SpriteFrame) => void) {
       base64ToTexture2D(base64, (texture: cc.Texture2D) => {
            if (texture) {
                var newframe = new cc.SpriteFrame(texture);
                if (callback) callback(newframe);
            } else {
                if (callback) callback(null);
            }
        });
    }

參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer

https://blog.csdn.net/opengl_es/article/details/44336477