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

更新时间：2024年07月29日 08:40:28 作者：代码冲冲冲

FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下

前言

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>

总结

到此这篇关于Js中FileReader相关操作方法的文章就介绍到这了,更多相关Js FileReader相关操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Array没有indexOf方法，这样在一个数组中查找某个元素的索引时比较麻烦，于是通过prototype原型扩展了Array.prototype.indexOf(),在对数组进行遍历的时候却出现了问题
2013-04-04
原生JS:Date对象全面解析
下面小编就为大家带来一篇原生JS:Date对象全面解析。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
基于canvas实现的钟摆效果完整实例
这篇文章主要介绍了基于canvas实现的钟摆效果,以完整实例形式分析了JavaScript结合html5的canvas技术实现钟摆动态旋转效果的方法,需要的朋友可以参考下
2016-01-01
浅谈JS使用[ ]来访问对象属性
下面小编就为大家带来一篇浅谈JS使用[ ]来访问对象属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JavaScript中数组slice和splice的对比小结
相信对很多学习JavaScript语言的人来说，都会经常搞不清slice和splice这两个方法。它们虽然名称相似，但是功能却完全不同。所以这篇文章就给大家详细整理了关于JavaScript中数组slice和splice的对比，有需要的可以参考学习。
2016-09-09
uni-app 百度语音识别文字并展示功能实现
这篇文章主要介绍了uni-app 百度语音识别文字并展示功能实现,本文主要写的是 uniapp实现语音输入并展示在页面上,纯前端,不涉及后端,需要的朋友可以参考下
2023-12-12
JS实现自动变换的菜单效果代码
这篇文章主要介绍了JS实现自动变换的菜单效果代码,可实现自动变换菜单选中项的技巧,涉及JavaScript定时函数触发页面样式属性变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
js注册时输入合法性验证方法
这篇文章主要为大家详细介绍了js注册时输入合法性验证方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-10-10
使用TypeScript实现高效的异步队列任务管理
在javaScript项目开发中,异步编程是不可或缺的一部分,从网络请求到延时操作,异步操作使得我们能够在等待某个任务完成时继续执行其他任务,提高应用的响应性和性能,本文使用JavaScript实现一个异步队列来优雅地管理复杂的异步任务流,需要的朋友可以参考下
2024-03-03
JavaScript Memoization 让函数也有记忆功能
函数可以用对象去记住先前操作的结果，从而能避免无谓的运算，这种优化被称为记忆（Memoization）。JavaScript 的对象和数组要实现这种优化是非常方便的。
2011-10-10