关于利用 FileReader 读取文件的随笔

近期在做项目时遇到了上传图片和pdf的需求，后端需要前端回传的参数为base64格式，于是就用到了FileReader这个方法。具体代码如下：

vue中上传文件

        <input type="file" ref="ipt" @change="getFileFn">

1、获取文件

        getFileFn() {

                let file = this.$refs.ipt.files[0];

                this.getBase64(file);

        }

2、将获取的文件转为base64

        getBase64( file ) {

                // 创建 FileReader 对象

                let reader = new FileReader();

                // 将文件解析为Base64

                reader.readAsDataURL(file);

                // 通过 onload 获取读取的文件的结果

                reader.onload = （）=> {

                        console.log(reader.result);

                }

        }

3、关于 FileReader 的方法解读

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容，一旦完成，result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象。

FileReader.readAsBinaryString()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。