国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64

這篇具有很好參考價值的文章主要介紹了前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

1、file轉(zhuǎn)base64具體代碼
// 圖片file轉(zhuǎn)base64方法(file文件,回調(diào)函數(shù))
  fileToBase64(file, callback) {
    // 創(chuàng)建FileReader對象(不兼容IE)
    let reader = new FileReader();
    // 將file轉(zhuǎn)為base64 (異步操作)
    reader.readAsDataURL(file); 
    // 轉(zhuǎn)換成功
    reader.onload = () => {
      const response = {
        status: true,
        data: reader.result
      }
      callback(response);
    };
    // 轉(zhuǎn)換失敗
    reader.onerror = function () {
      const response = {
        status: false,
        data: reader.error
      }
      callback(response);
    };
  }

// 調(diào)用方法
fileToBase64(imgFile, (res) => {
  if(res.status) {
    console.log('file轉(zhuǎn)化成base64成功---',res.data)
  } else {
    console.log('file轉(zhuǎn)化base64失敗---',res.data)
  }
})
2、原理解析

? 上面封裝的方法,其原理主要是借助FileReader對象來實(shí)現(xiàn)圖片格式的轉(zhuǎn)換,FileReader對象中的readAsDataURL()方法,可以讀取一個FileBlob類型的文件,并將其轉(zhuǎn)換為base64格式的字符串。但要注意的一點(diǎn)是:我們通過readAsDataURL()方法去讀取一個文件時,屬于異步操作,因此我們需要在FileReader對象的onload事件或onerror事件中,通過回調(diào)函數(shù)的方式,將文件類型轉(zhuǎn)換的結(jié)果,傳遞給方法的調(diào)用者。

? 還有最重要的一點(diǎn):該方法不兼容IE。

3、FileReader對象

? FileReader對象可以異步的讀取用戶計(jì)算機(jī)上文件,但僅限于以安全的方式(通過<input>、DataTransfer等方式獲取文件后),讀取對應(yīng)的FileBlob類型的文件,并不能按照文件路徑去用戶的存儲的讀取對應(yīng)文件。

瀏覽器兼容性:

前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64

① 創(chuàng)建FileReader對象的方法只有一種,那就是構(gòu)造函數(shù):
// 創(chuàng)建FileReader對象
let reader = new FileReader();
② 常用屬性

? error:表示當(dāng)讀取文件發(fā)生錯誤時,返回的錯誤信息。

? readyState:表示目前FileReader對象的狀態(tài),值有三個:0—未讀取任何數(shù)據(jù)、1—正在讀取數(shù)據(jù)、2—數(shù)據(jù)讀取完成或被終止。

? result:表示文件讀取并轉(zhuǎn)換格式后的結(jié)果,結(jié)果的格式取決于使用的讀取方法。

③ 對象事件

? onload:該事件在讀取操作完成時觸發(fā),此時可以通過reader.result拿到文件讀取并轉(zhuǎn)換格式后的結(jié)果。

? onerror:該事件在讀取操作才發(fā)生錯誤時觸發(fā)此時可以通過reader.error拿到對應(yīng)的錯誤信息。

? onabort:該事件在讀取操作被中斷時觸發(fā)。

④ 常用方法

? readAsDataURL(file):讀取一個file或Blob文件,并將其轉(zhuǎn)換為base64格式,存儲在reader.result。

? readAsArrayBuffer(file):讀取一個file或Blob文件,并將其轉(zhuǎn)換為ArrayBuffer格式,存儲在reader.result

? readAsText(file[,encoding]):讀取一個file或Blob文件,并將其按照第二個參數(shù)設(shè)置的編碼類型轉(zhuǎn)換為字符串格式(默認(rèn)為UTF-8格式),存儲在reader.result。

? abort():終止正在進(jìn)行的讀取操作。

4、相關(guān)文檔

FileReader
前端借助Canvas實(shí)現(xiàn)壓縮圖片兩種方法
前端將base64圖片轉(zhuǎn)換成file文件文章來源地址http://www.zghlxwxcb.cn/news/detail-405618.html

到了這里,關(guān)于前端FileReader對象實(shí)現(xiàn)圖片file文件轉(zhuǎn)base64的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 前端base64轉(zhuǎn)file文件方法

    有這樣一種場景,比如canvas截取部分dom作為圖片,上傳到服務(wù)器,而canvas截取的圖片返回的是base64字符串,而服務(wù)器接收的是file文件。因此我們需要將base64字符串轉(zhuǎn)成file文件,存儲到服務(wù)器中。 方法一:通過new File(),將base64直接轉(zhuǎn)成file文件。 (此方法需要考慮瀏覽器兼容

    2024年02月11日
    瀏覽(27)
  • 【js】js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64):

    【js】js前端技巧之圖片格式轉(zhuǎn)換(File、Blob、base64):

    一、類型簡介 BLOB(binary large object) : 二進(jìn)制大對象,是一個可以存儲二進(jìn)制文件的容器。 在計(jì)算機(jī)中,BLOB常常是數(shù)據(jù)庫中用來存儲二進(jìn)制文件的字段類型。 屬性名稱 讀/寫 描述 size 只讀 Blob 對象中所包含數(shù)據(jù)的大?。ㄗ止?jié))。 type 只讀 一個字符串,表明該Blob對象所包含數(shù)據(jù)

    2024年02月07日
    瀏覽(30)
  • Base64轉(zhuǎn)二進(jìn)制文件流以及轉(zhuǎn)File、圖片轉(zhuǎn)Base64、二進(jìn)制流轉(zhuǎn)Base64

    1、Base64轉(zhuǎn)二進(jìn)制文件流 方法一: 調(diào)用示例: 方法二: 調(diào)用示例: ?2、Base64轉(zhuǎn)File 方法一: 調(diào)用示例: 方法二: 調(diào)用示例: 補(bǔ)充: 3、圖片轉(zhuǎn)Base64 調(diào)用示例: 4、二進(jìn)制流轉(zhuǎn)Base64 方法一: 調(diào)用示例: 方法二: 調(diào)用示例: 5、補(bǔ)充 5.1?atob() atob() ?對經(jīng)過 base-64 編碼的字符

    2024年02月04日
    瀏覽(95)
  • js - 圖片base64轉(zhuǎn)file文件的兩種方式

    js - 圖片base64轉(zhuǎn)file文件的兩種方式

    最近項(xiàng)目中需要實(shí)現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能,然后再上傳至服務(wù)器。 1.通過new File()將base64轉(zhuǎn)換成file文件,此方式需考慮瀏覽器兼容問題 2.先將base64轉(zhuǎn)換成blob,再將blob轉(zhuǎn)換成file文件,此方法不存在瀏覽器不兼容問題 vue中配合vant的uploader上傳組件使用案例: 打

    2024年02月14日
    瀏覽(32)
  • 前端實(shí)現(xiàn)圖片轉(zhuǎn)Base64

    前端實(shí)現(xiàn)圖片轉(zhuǎn)Base64

    廢話不多說,直接上代碼 我們傳入一個圖 片地址看看是否成功? 但是,一般我們在做這樣的需求前,處理的圖片肯定不止一張,接下來就要批量處理,但是這個方法是異步,我們要將一個數(shù)組內(nèi)的每個對象的地址都轉(zhuǎn)成base64,才算真正完成我們的功能。前端一般接收到后端的

    2024年02月05日
    瀏覽(31)
  • 圖片格式轉(zhuǎn)換(File、Blob、base64)

    圖片格式轉(zhuǎn)換(File、Blob、base64)

    前言 記錄一下比較常見的圖片格式(File、Blob、base64)在不同的場景他們之間的相互轉(zhuǎn)換的方法。 一、類型簡介 Blob BLOB(binary large object): 二進(jìn)制大對象,是一個可以存儲二進(jìn)制文件的容器。 在計(jì)算機(jī)中,BLOB常常是數(shù)據(jù)庫中用來存儲二進(jìn)制文件的字段類型。 屬性名稱 讀/寫 描

    2024年02月02日
    瀏覽(32)
  • 圖片文件和 Base64 字符串互轉(zhuǎn)(Java 實(shí)現(xiàn))

    ??項(xiàng)目中,有些場景下,客戶端需要將本地圖片傳輸?shù)椒?wù)方存儲,此時客戶端可以將圖片文件轉(zhuǎn)為 Base64 字符串傳輸?shù)椒?wù)方,服務(wù)方收到后再將 Base64 字符串還原為圖片。以下是一些圖片文件和 Base64 字符串互轉(zhuǎn)的工具類,以及校驗(yàn)圖片大小的工具。 一、依賴包 二、工

    2024年02月04日
    瀏覽(30)
  • java實(shí)現(xiàn)文件的上傳和下載,將文件流轉(zhuǎn)base64返回給前端

    上傳代碼 文件下載代碼 后端通過json拿到文件流的返回,我采用將文件流轉(zhuǎn)成base64返回給前臺,實(shí)現(xiàn)代碼如下:

    2024年02月13日
    瀏覽(37)
  • 將html字符串中的base64圖片轉(zhuǎn)換成file并上傳

    目的 解決富文本編輯器中復(fù)制粘貼的圖片 base64 字符串過長導(dǎo)致無法存儲到數(shù)據(jù)庫的問題 思路 通過正則 獲取html字符串中里面的所有圖片 base64 數(shù)組 然后每個圖片base64 轉(zhuǎn)成file 使用上傳文件的函數(shù) 上傳到服務(wù)器上. 將上傳后獲取到的圖片訪問url 替換成 數(shù)據(jù)里面的 img 的 src

    2024年01月23日
    瀏覽(58)
  • 前端 base64與圖片相互轉(zhuǎn)換

    前端 base64與圖片相互轉(zhuǎn)換

    base64轉(zhuǎn)圖片 如下圖:(后端返回的數(shù)據(jù)) base64轉(zhuǎn)換圖片文件 圖片(url)轉(zhuǎn)換base64 便捷的圖片轉(zhuǎn)化base64 利用 Chrome 瀏覽器,在 chrome 下新建一個窗口,然后把要轉(zhuǎn)化的圖片直接拖入瀏覽器,打開控制臺,點(diǎn) Source,如下圖所示,點(diǎn)擊圖片,右側(cè)就會顯示該圖片的 base64 編碼

    2024年02月12日
    瀏覽(24)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包