js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像

更新時(shí)間：2022年05月23日 09:48:15 作者：前端啊林

本文主要介紹了js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

頁(yè)面布局:

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更換頭像</span>
    </div>
    <div>
      <!-- 圖片，用來(lái)展示用戶選擇的頭像 -->
      <img :src="Avatar" alt="" style="width:350px;"  v-if="Avatar"/>
      <img src="../../../assets/images/avatar.jpg" alt=""  v-else />

      <!-- 按鈕區(qū)域 -->
      <div class="btn-box">
        <input type="file" style="display:none;" ref="refIpt" @change="onIptChange">
        <el-button type="primary" icon="el-icon-plus" @click="chooseImg">選擇圖片</el-button>
        <el-button type="success" icon="el-icon-upload" :disabled="Avatar===''"  @click="upLoadAvatar">上傳頭像</el-button>
      </div>
    </div>
  </el-card>
</template>

思路分析:

1.點(diǎn)擊button按鈕觸發(fā)input的點(diǎn)擊事件,所以需要給input設(shè)置ref拿到Dom
2.給input設(shè)置change改變事件
- 2.1設(shè)置一個(gè)變量接收轉(zhuǎn)換的數(shù)據(jù)
- 2.2拿到事件目標(biāo),里面有個(gè)方法e.target.files是個(gè)偽數(shù)組.通過(guò)e.target.files.length判斷用戶是否選擇了圖片
- 2.3通過(guò)new FileReader拿到一個(gè)實(shí)例
- 2.4通過(guò) 實(shí)例名.readAsDataURL 將圖片轉(zhuǎn)成base64格式
- 2.5onload可以監(jiān)聽(tīng)轉(zhuǎn)換完成后/給聲明變量賦值
3.點(diǎn)擊上傳按鈕發(fā)送axios/上傳成功重新請(qǐng)求用戶信息實(shí)現(xiàn)信息刷新

代碼:

<script>
export default {
  name: 'UserAvatar',
  data () {
    return {
      // 聲明一個(gè)變量存儲(chǔ)轉(zhuǎn)好的base64進(jìn)制
      Avatar: ''
    }
  },
  methods: {
    // 點(diǎn)擊button觸發(fā)input點(diǎn)擊事件
    chooseImg () {
      this.$refs.refIpt.click()
    },
    // input內(nèi)容改變事件
    // e拿到事件對(duì)象
    onIptChange (e) {
      // e.target.files是個(gè)偽數(shù)組/可以通過(guò)長(zhǎng)度判斷用戶是否選擇了圖片
      if (e.target.files.length === 0) {
        // 點(diǎn)擊了取消了,就恢復(fù)默認(rèn)圖片
        this.Avatar = ''
      } else {
        // FileReader 瀏覽器提供的方法
        const reader = new FileReader()
        // reader里面有個(gè)方法readAsDataURL 可以將圖片轉(zhuǎn)base64進(jìn)制
        reader.readAsDataURL(e.target.files[0])
        // onload可以監(jiān)聽(tīng)轉(zhuǎn)換完成后
        reader.onload = () => {
        // 給聲明變量賦值
          this.Avatar = reader.result
        }
      }
    },
    // 點(diǎn)擊上傳頭像
    async  upLoadAvatar () {
      // 發(fā)送axios 上傳
      const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.Avatar })
      // 判斷業(yè)務(wù)狀態(tài)碼是否上傳成功給出提示
      if (res.code !== 0) return this.$message.error(res.message)
      console.log(res)
      this.$message.success(res.message)
      // 上傳成功發(fā)送重新發(fā)送axios獲取最新用戶信息
      this.$store.dispatch('initUserInfo')
    }
  }

}
</script>

到此這篇關(guān)于js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像的文章就介紹到這了,更多相關(guān)js FileReader 圖片轉(zhuǎn)base64內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: