JS File 和 Blob 是什么

1、js file 和 blob 是什么file / blob 是什么 blob 是最原始的文件對象，file 是基于 blob 改造的，因此 blob 的屬性/辦法在 file 中同樣可以用法，你可以理解為 file = blob，像 input 挑選文件后會返回的文件信息就是屬于 file 怎么操作 file / blob js 提供的 filereader 、url.createobjecturl（） 都可以處理 file / blob filereader filereader 可以用來讀取 file / blob ， input 挑選上傳文件時比如是一張 file ，那么我們可以傳遞這個

2、 file 到 filereader 提供相關(guān)的 api 來轉(zhuǎn)成對應(yīng)的數(shù)據(jù) filereader api reader.readasdataurl（file | blob） 轉(zhuǎn)成 base64 reader.readasarraybuffer（file | blob） 轉(zhuǎn)成緩沖數(shù)組 reader.readastext（file | blob） 轉(zhuǎn)成文本 reader.readasbinarystring（file | blob） 轉(zhuǎn)成字節(jié) 我們來看看 demo / 文件上傳后的回調(diào) function onchange（event） / 接受 input 傳遞過來的 file，這里返回的數(shù)組，我

3、們?nèi)〉谝粋€就好。 const file = event.target.files0 / 開頭利用 filereader 操控 file const reader = new filereader（） / 開頭轉(zhuǎn)成 base64 reader.readasdataurl（file） / 轉(zhuǎn)成base64 后 可通過 onload 來獵取 reader.onload = （res） => console.log（res.target.result） / base64 控制臺打印出 base64 拿到 base64 后就可以做你想做的事情了，比如放到 img.src 或粘貼到掃瞄器拜訪 url

4、.createobjecturl（） url.createobjecturl（） 可以將 file / blob 轉(zhuǎn)成一個 url 拜訪鏈接， 格式類似為：blob:wer3-werwr3-wer-qweq5-eedee 這樣的字符串，你可以放到 img.src 或粘貼到掃瞄器拜訪，我們來看看 demo / 文件上傳后的回調(diào) function onchange（event） / 接受 file const file = event.target.files0 / 生成 url console.log（url.createobjecturl（file） 1 2 3 4 5 6 7 8 9 10

5、11 12 13 14 15 16 17 18 19 20 21 22 base64 和 blob:url 應(yīng)用場景 base64 通常用于展示、預(yù)覽 blob: url 通常用于分塊上傳、點擊鏈接文件下載、生成 pdf 等、 手動創(chuàng)建 blob 因為挑選 input 文件會自動返回 file，這里就以創(chuàng)建 blob 為例， 我們可以將對象數(shù)據(jù)放到 blob 里面然后生成 blob:url | base64 | 文本數(shù)據(jù) 我們來看下 demo const obj = name: &39;jack&39; / 將數(shù)據(jù)放到 blob const blob = new blob（js

6、on.stringify（obj , null, 2）, type : &39;application/json&39;）; / 轉(zhuǎn)成 base64 const reader = new filereader（） reader.readasdataurl（blob） reader.onload = （res） => console.log（res.target.result） / 轉(zhuǎn)成 url console.log（url.createobjecturl（blob） / 挺直讀取文本（創(chuàng)建 blob 會返回一個 promise ，所以我們可以用 await 來獵?。?console.log（await blob.text（） 好了，內(nèi)容就到這里，信任你已經(jīng)對 file / blob 基本概念有所了解。 n