通过fileReader获取文件内容以及转换图片到base64的方法

获取文件中的内容

function readFile2Text(files) {     
    return new Promise((resolve) => {
        //判断浏览器是否支持filereader
        if(typeof FileReader == 'undefined') {
            window.alert('抱歉，你的浏览器不支持 FileReader');
            resolve(false);
        }
        const file = files[0];
        
        let reader = new FileReader();
        //将文件以文本形式读入页面
        reader.readAsText(file, "gb2312");
        reader.onload = function () {
            let fileText = this.result;
            // console.log(fileText)
            resolve(fileText);
        }
    });
}

reader.readAsText(file, “gb2312”);开始没有注明“gb2312”，读取txt之后，文件显示乱码。注明后解决。

如果html文件是utf8格式的，那么这里应该使用utf8!! reader.readAsText(file,"utf8");

使用：

<input type="file" 
           id="upload-json" 
            class="upload-json" 
          @change="uploadJson($event)"
>

async uploadJson(event) {
            const jsonStr = await readFile2Text(event.target.files);
            const json = JSON.parse(jsonStr);
            this.ztData = json;
},

上传的图片转化为base64

function readImage2Base64(files) {
    return new Promise((resolve) => {
        //判断浏览器是否支持filereader
        if(typeof FileReader == 'undefined') {
            window.alert('抱歉，你的浏览器不支持 FileReader');
            resolve(false);
        }
        const file = files[0];
        //判断获取的是否为图片文件
        if(!/image\/\w+/.test(file.type))
        {
            window.alert("文件必须为图像文件");
            resolve(false);
        }
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            const base64 = this.result;
            resolve(base64);
        }
    });
}

filereader相关API

flieReader 三种状态： FileReader.readyState:0,1,2

• 0:empty ,没有文件被load，为空。
• 1:loading,文件正在被加载。
• 2:done,读取请求完成。

fileReader事件处理，6种。

1. onabort:文件读取终端，触发。
2. onerror:文件遇到错误触发。
3. onload:文件成功读取触发。
4. onloadstart:文件开始读取时触发。
5. onloadend:文件读取结束时触发（无论成功失败）。
6. onprogress:文件读取中触发。

相关资料