Js中的FileReader相关操作方法总结_Javascript

前言

filereader是js中一种异步读取文件的对象,它可以将文件内容按照不同格式读取,在谈论filereader对象前,先来介绍两个对象,blob对象和file对象.

blob对象

blob 对象表示一个不可变、原始数据的类文件对象。也就是说,blob对象一经定义,就不能再被修改了。

如何构建一个blob对象?

通过构造函数构建

let blob = new blob(["hello"], {type: "text/plain"})
console.log(blob)
//返回值为:
// blob {size: 7, type: 'text/plain'}

接下来我们分别来解释这两个参数的意义:

第一个参数: 接收一个数组(array),数组中可以存放任何类型的数据,这些数据都会被存入blob中。

第二个参数: 接收一个对象,该对象为可选对象,该对象中包含了两个属性:

type属性: 将会被存储到blob中的mime数据类型(一种标识文件数据类型的方式),如type/plain,type/html,image/jpeg等。

endings属性: 指定在blob为文本形式时如何处理结尾符，该参数只对存储文本数据的blob对象有效,对二进制的blob对象无效。

blob相关的属性和操作

blob对象有两个属性,分别为size和type

let blob = new blob(["hello", "1", 1], {type: "text/html"})
//获取blob中存储的数据总长度
console.log(blob.size)
//获取blob中存储数据类型
//这里的数据类型实质上仅为了标识存储类型,算是一种约定
console.log(blob.type)

blob对象有以下操作函数,这些操作函数提供了方便的api去操作blob的数据

let blob = new blob(["hello", "1", 1], {type: "text/plain"})
/**
 * text()方法
 * text方法返回一个promise对象,通过获取返回值得到blob中存储的数据
 * @return promise
 */
blob.text().then(res => {
    //返回值会将原先的数据全都合并起来
    //返回:hello11
    console.log(res)
})
/**
 * slice()方法
 * slice方法会将blob中的数据进行切片,并返回一个新的blob对象
 * @param start:数据截取起始位置(包含)
 * @param end: 数据截取终止索引位置(不包含)
 * @param contenttype/type: 分片后得到的新blob对象内存储数据的类型,默认为''
 * @return blob
 */
let newblob = blob.slice(0, 3)
console.log(newblob)
/**
 * stream()方法
 * stream方法会返回一个可读流对象
 * 该对象允许我们可以逐块读取blob对象中的数据
 * @return readablestream
 */
let readablestream = blob.stream();
let reader = readablestream.getreader();
reader.read().then(res => {
    console.log(res)
    //这里返回的数据为ascii码
    // 我们可以通过访问数组中的数据来做到分块访问
    console.log(res.value)
    console.log(string.fromcharcode(res.value[6]))//1
    console.log(string.fromcharcode(res.value[0]))//h
})
/**
 * arraybuffer方法
 * 以二进制形式解析blob对象的数据,并返回一个promise对象
 * arraybuffer对象表示一个通用原始的二进制数据缓冲区
 * @return promise
 */
blob.arraybuffer().then(res => {
    console.log(res)//输出一个arraybuffer对象
})

file对象:特殊的blob对象

file对象是一个特殊的blob对象,通常用来标识input上传的单个文件的信息。

简单来说,file对象是blob对象的子类。

关于file对象的操作非常少,以下是具体属性和操作

/***
 * @param filebits:接受一个array,array中存储blob,arraybuffer,字符串等对象
 * @param name:文件名
 * @param options:{
 *     type:mime类型,选择文件的类型,
 *     lastmodified: 文件最后修改时间
 * }
 * @type {file}
 */
let file=new file(["test"],"test.txt",{
    type:"text/plain",
})
console.log(file)//获取文件对象
console.log(file.lastmodified)//获取文件最后修改时间
console.log(file.lastmodifieddate)//获取文件最后修改时间,使用date对象存储
console.log(file.name)//获取文件名

filelist对象

filelist对象简单来说就是存储file对象的一个容器。通常,filelist需要我们通过访问files数组获取。

filelist具体的属性如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<body>
<input type="file" id="file">
<script>
    let files = document.getelementbyid("file")
    files.addeventlistener("change", (event) => {
        //通过访问files文件列表来获取filelist对象
        let filelist = event.target.files
        console.log(filelist)//查看filelist对象
        //使用filelist的api访问指定索引的file对象
        console.log(filelist.item(0))
    })
</script>
</body>
</html>

filereader对象

铺垫了这么长时间,终于请出了这篇文章的正主,filereader.

filereader对象可以以异步的形式来访问用户上传的文件

filereader的三个属性

error: 返回读取时的错误信息

readystate: 返回操作的当前状态

值	状态	描述
0	empty	reader被创建,但是没有调用读取方法
1	loading	读取方法被调用
2	done	完成操作

result: 返回读取文件的结果

具体的操作和属性如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<body>
<input type="file" id="file">
<script>
    let filereader = new filereader();
    let files = document.getelementbyid("file")
    files.addeventlistener("change", (event) => {
        let filelist = event.target.files
        let file = filelist[0]
        console.log(filereader.readystate)//未调用函数,返回0
        /**
         * 这里readastext接受一个blob对象,之前说过,file对象就是特殊的blob对象
         * 所以直接传入file对象
         * 这里readastext用于将文件读取为文本形式
         * @param blob 接受一个blob对象
         * @param encoding 设置编码格式
         * @return undefined 该函数没有返回值
         * */
        // filereader.readastext(file)
        //调用终止函数,终止文件读取
        // filereader.abort()
        /**
         * readasdataurl方法
         * 该方法会将文件读取并最后返回一个基于base64的url到result属性中
         * 这里result中的url以data:开头
         * @param blob 接受一个blob对象
         * @return undefined
         */
        // filereader.readasdataurl(file)
        /**
         * readasarraybuffer方法
         * 该方法会将文件读取并存储为arraybuffer,最后返回一个arraybuffer数组到result中
         * @param blob 接受一个blob对象
         * @return undefined
         * */
        filereader.readasarraybuffer(file)
    })
    /**
     * 该方法在读取时调用
     */
    filereader.onloadstart = () => {
        console.log("开始读取")
        console.log(filereader.readystate)//调用函数,但还没有结束,返回1
    }
    /**
     * 该方法在读取成功时调用
     */
    filereader.onload = () => {
        console.log("读取成功")
        console.log(filereader.result)
        console.log(filereader.readystate)//调用完成,返回2
    }
    /**
     * 该方法在读取结束时调用
     */
    filereader.onloadend = () => {
        console.log("读取结束")
    }
    /**
     * 读取过程中触发
     */
    filereader.onprogress = (e) => {
        console.log("读取中")
        //获取已经加载的数据量
        console.log("loaded==>" + e.loaded)
    }
    /**
     * 该方法在调用abort函数时触发
     */
    filereader.onabort = () => {
        console.log("操作终止")
    }
    //当读取出现失败时触发
    filereader.onerror = () => {
        console.log("出现错误")
        console.log(filereader.error)
    }
</script>
</body>
</html>

url.createobjecturl

该方法用于创建一个包含指定对象的临时url,这个url的生命周期会和创建他的这个窗口的生命周期绑定，如果创建他的窗口被关闭了,那么这个url也就会失效。

一般来说,都会将file对象或者blob对象作为参数传入该函数,并且让这个临时url来代表这些对象。

以下是一个案例:该案例根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<body>
<input type="file" id="file">
<img  id="ig">
<script>
    let file = document.getelementbyid("file")
    let ig = document.getelementbyid("ig")
    file.addeventlistener("change", (e) => {
        let filelist=e.target.files
        //先获取一份文件
        //这里获取的才是file对象
        let file = filelist[0]
        //因为file也是blob对象,所以直接传入即可
        ig.src=url.createobjecturl(file)
    })
</script>
</body>
</html>