快捷導(dǎo)航

Js中的FileReader相關(guān)操作方法總結(jié)

更新時(shí)間：2024年07月29日 08:40:28 作者：代碼沖沖沖

FileReader是前端進(jìn)行文件處理的一個(gè)重要的API,特別是在對(duì)圖片的處理上,這篇文章主要給大家介紹了關(guān)于Js中FileReader相關(guān)操作方法的相關(guān)資料,需要的朋友可以參考下

前言

FileReader是js中一種異步讀取文件的對(duì)象,它可以將文件內(nèi)容按照不同格式讀取,在談?wù)揊ileReader對(duì)象前,先來(lái)介紹兩個(gè)對(duì)象,Blob對(duì)象和File對(duì)象.

Blob對(duì)象

Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象。也就是說(shuō),Blob對(duì)象一經(jīng)定義,就不能再被修改了。

如何構(gòu)建一個(gè)Blob對(duì)象?

通過(guò)構(gòu)造函數(shù)構(gòu)建

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

接下來(lái)我們分別來(lái)解釋這兩個(gè)參數(shù)的意義:

第一個(gè)參數(shù): 接收一個(gè)數(shù)組(array),數(shù)組中可以存放任何類(lèi)型的數(shù)據(jù),這些數(shù)據(jù)都會(huì)被存入Blob中。

第二個(gè)參數(shù): 接收一個(gè)對(duì)象,該對(duì)象為可選對(duì)象,該對(duì)象中包含了兩個(gè)屬性:

type屬性: 將會(huì)被存儲(chǔ)到blob中的MIME數(shù)據(jù)類(lèi)型(一種標(biāo)識(shí)文件數(shù)據(jù)類(lèi)型的方式),如type/plain,type/html,image/jpeg等。

endings屬性: 指定在Blob為文本形式時(shí)如何處理結(jié)尾符，該參數(shù)只對(duì)存儲(chǔ)文本數(shù)據(jù)的Blob對(duì)象有效,對(duì)二進(jìn)制的Blob對(duì)象無(wú)效。

Blob相關(guān)的屬性和操作

Blob對(duì)象有兩個(gè)屬性,分別為Size和type

let blob = new Blob(["Hello", "1", 1], {type: "text/html"})
//獲取blob中存儲(chǔ)的數(shù)據(jù)總長(zhǎng)度
console.log(blob.size)
//獲取blob中存儲(chǔ)數(shù)據(jù)類(lèi)型
//這里的數(shù)據(jù)類(lèi)型實(shí)質(zhì)上僅為了標(biāo)識(shí)存儲(chǔ)類(lèi)型,算是一種約定
console.log(blob.type)

Blob對(duì)象有以下操作函數(shù),這些操作函數(shù)提供了方便的API去操作Blob的數(shù)據(jù)

let blob = new Blob(["Hello", "1", 1], {type: "text/plain"})
/**
 * text()方法
 * text方法返回一個(gè)Promise對(duì)象,通過(guò)獲取返回值得到Blob中存儲(chǔ)的數(shù)據(jù)
 * @return Promise
 */
blob.text().then(res => {
    //返回值會(huì)將原先的數(shù)據(jù)全都合并起來(lái)
    //返回:Hello11
    console.log(res)
})
/**
 * slice()方法
 * slice方法會(huì)將Blob中的數(shù)據(jù)進(jìn)行切片,并返回一個(gè)新的Blob對(duì)象
 * @param start:數(shù)據(jù)截取起始位置(包含)
 * @param end: 數(shù)據(jù)截取終止索引位置(不包含)
 * @param contentType/type: 分片后得到的新Blob對(duì)象內(nèi)存儲(chǔ)數(shù)據(jù)的類(lèi)型,默認(rèn)為''
 * @return Blob
 */
let newBlob = blob.slice(0, 3)
console.log(newBlob)
/**
 * stream()方法
 * stream方法會(huì)返回一個(gè)可讀流對(duì)象
 * 該對(duì)象允許我們可以逐塊讀取Blob對(duì)象中的數(shù)據(jù)
 * @return ReadableStream
 */
let readableStream = blob.stream();
let reader = readableStream.getReader();
reader.read().then(res => {
    console.log(res)
    //這里返回的數(shù)據(jù)為ASCII碼
    // 我們可以通過(guò)訪(fǎng)問(wèn)數(shù)組中的數(shù)據(jù)來(lái)做到分塊訪(fǎng)問(wèn)
    console.log(res.value)
    console.log(String.fromCharCode(res.value[6]))//1
    console.log(String.fromCharCode(res.value[0]))//H
})
/**
 * arrayBuffer方法
 * 以二進(jìn)制形式解析Blob對(duì)象的數(shù)據(jù),并返回一個(gè)Promise對(duì)象
 * Arraybuffer對(duì)象表示一個(gè)通用原始的二進(jìn)制數(shù)據(jù)緩沖區(qū)
 * @return Promise
 */
blob.arrayBuffer().then(res => {
    console.log(res)//輸出一個(gè)ArrayBuffer對(duì)象
})

File對(duì)象:特殊的Blob對(duì)象

File對(duì)象是一個(gè)特殊的Blob對(duì)象,通常用來(lái)標(biāo)識(shí)input上傳的單個(gè)文件的信息。

簡(jiǎn)單來(lái)說(shuō),File對(duì)象是Blob對(duì)象的子類(lèi)。

關(guān)于File對(duì)象的操作非常少,以下是具體屬性和操作

/***
 * @param fileBits:接受一個(gè)Array,Array中存儲(chǔ)Blob,ArrayBuffer,字符串等對(duì)象
 * @param name:文件名
 * @param options:{
 *     type:MIME類(lèi)型,選擇文件的類(lèi)型,
 *     lastModified: 文件最后修改時(shí)間
 * }
 * @type {File}
 */
let file=new File(["test"],"test.txt",{
    type:"text/plain",
})
console.log(file)//獲取文件對(duì)象
console.log(file.lastModified)//獲取文件最后修改時(shí)間
console.log(file.lastModifiedDate)//獲取文件最后修改時(shí)間,使用Date對(duì)象存儲(chǔ)
console.log(file.name)//獲取文件名

FileList對(duì)象

FileList對(duì)象簡(jiǎn)單來(lái)說(shuō)就是存儲(chǔ)File對(duì)象的一個(gè)容器。通常,fileList需要我們通過(guò)訪(fǎng)問(wèn)files數(shù)組獲取。

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) => {
        //通過(guò)訪(fǎng)問(wèn)files文件列表來(lái)獲取fileList對(duì)象
        let fileList = event.target.files
        console.log(fileList)//查看fileList對(duì)象
        //使用fileList的API訪(fǎng)問(wèn)指定索引的File對(duì)象
        console.log(fileList.item(0))
    })
</script>
</body>
</html>

FileReader對(duì)象

鋪墊了這么長(zhǎng)時(shí)間,終于請(qǐng)出了這篇文章的正主,FileReader.

FileReader對(duì)象可以以異步的形式來(lái)訪(fǎng)問(wèn)用戶(hù)上傳的文件

FileReader的三個(gè)屬性

error: 返回讀取時(shí)的錯(cuò)誤信息

readyState: 返回操作的當(dāng)前狀態(tài)

值	狀態(tài)	描述
0	EMPTY	reader被創(chuàng)建,但是沒(méi)有調(diào)用讀取方法
1	LOADING	讀取方法被調(diào)用
2	DONE	完成操作

result: 返回讀取文件的結(jié)果

具體的操作和屬性如下:

<!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)//未調(diào)用函數(shù),返回0
        /**
         * 這里readAsText接受一個(gè)Blob對(duì)象,之前說(shuō)過(guò),File對(duì)象就是特殊的Blob對(duì)象
         * 所以直接傳入file對(duì)象
         * 這里readAsText用于將文件讀取為文本形式
         * @param Blob 接受一個(gè)blob對(duì)象
         * @param encoding 設(shè)置編碼格式
         * @return undefined 該函數(shù)沒(méi)有返回值
         * */
        // fileReader.readAsText(file)
        //調(diào)用終止函數(shù),終止文件讀取
        // fileReader.abort()
        /**
         * readAsDataUrl方法
         * 該方法會(huì)將文件讀取并最后返回一個(gè)基于Base64的URL到result屬性中
         * 這里result中的url以data:開(kāi)頭
         * @param Blob 接受一個(gè)blob對(duì)象
         * @return undefined
         */
        // fileReader.readAsDataURL(file)
        /**
         * readAsArrayBuffer方法
         * 該方法會(huì)將文件讀取并存儲(chǔ)為ArrayBuffer,最后返回一個(gè)ArrayBuffer數(shù)組到result中
         * @param Blob 接受一個(gè)blob對(duì)象
         * @return undefined
         * */
        fileReader.readAsArrayBuffer(file)
    })
    /**
     * 該方法在讀取時(shí)調(diào)用
     */
    fileReader.onloadstart = () => {
        console.log("開(kāi)始讀取")
        console.log(fileReader.readyState)//調(diào)用函數(shù),但還沒(méi)有結(jié)束,返回1
    }
    /**
     * 該方法在讀取成功時(shí)調(diào)用
     */
    fileReader.onload = () => {
        console.log("讀取成功")
        console.log(fileReader.result)
        console.log(fileReader.readyState)//調(diào)用完成,返回2
    }
    /**
     * 該方法在讀取結(jié)束時(shí)調(diào)用
     */
    fileReader.onloadend = () => {
        console.log("讀取結(jié)束")
    }
    /**
     * 讀取過(guò)程中觸發(fā)
     */
    fileReader.onprogress = (e) => {
        console.log("讀取中")
        //獲取已經(jīng)加載的數(shù)據(jù)量
        console.log("loaded==>" + e.loaded)
    }
    /**
     * 該方法在調(diào)用abort函數(shù)時(shí)觸發(fā)
     */
    fileReader.onabort = () => {
        console.log("操作終止")
    }
    //當(dāng)讀取出現(xiàn)失敗時(shí)觸發(fā)
    fileReader.onerror = () => {
        console.log("出現(xiàn)錯(cuò)誤")
        console.log(fileReader.error)
    }
</script>
</body>
</html>

URL.createObjectURL

該方法用于創(chuàng)建一個(gè)包含指定對(duì)象的臨時(shí)url,這個(gè)url的生命周期會(huì)和創(chuàng)建他的這個(gè)窗口的生命周期綁定，如果創(chuàng)建他的窗口被關(guān)閉了,那么這個(gè)url也就會(huì)失效。

一般來(lái)說(shuō),都會(huì)將File對(duì)象或者Blob對(duì)象作為參數(shù)傳入該函數(shù),并且讓這個(gè)臨時(shí)url來(lái)代表這些對(duì)象。

以下是一個(gè)案例:該案例根據(jù)用戶(hù)傳入的圖片文件,來(lái)生成一個(gè)對(duì)應(yīng)的臨時(shí)url,并將臨時(shí)url作為src傳給img標(biāo)簽

<!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對(duì)象
        let file = fileList[0]
        //因?yàn)閒ile也是Blob對(duì)象,所以直接傳入即可
        ig.src=URL.createObjectURL(file)
    })
</script>
</body>
</html>