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

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

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

前言

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

Blob對象

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

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

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

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

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

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

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

type屬性: 將會被存儲到blob中的MIME數(shù)據(jù)類型(一種標識文件數(shù)據(jù)類型的方式),如type/plain,type/html,image/jpeg等。

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

Blob相關的屬性和操作

Blob對象有兩個屬性,分別為Size和type

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

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

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

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

URL.createObjectURL

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

一般來說,都會將File對象或者Blob對象作為參數(shù)傳入該函數(shù),并且讓這個臨時url來代表這些對象。

以下是一個案例:該案例根據(jù)用戶傳入的圖片文件,來生成一個對應的臨時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>