js怎么利用FileReader實現圖片轉base64格式并上傳預覽頭像

今天小編給大家分享一下js怎么利用FileReader實現圖片轉base64格式并上傳預覽頭像的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

修改用戶頭像,一般都會需要把圖片轉成base64格式,所以我們需要學會怎么利用FileReader轉換

頁面布局:

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

      <!-- 按鈕區域 -->
      <div class="btn-box">
        <input type="file"  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.點擊button按鈕觸發input的點擊事件,所以需要給input設置ref拿到Dom

• 2.給input設置change改變事件

• 2.1設置一個變量接收轉換的數據

• 2.2拿到事件目標,里面有個方法e.target.files是個偽數組.通過e.target.files.length判斷用戶是否選擇了圖片

• 2.3通過new FileReader拿到一個實例

• 2.4通過 實例名.readAsDataURL 將圖片轉成base64格式

• 2.5onload可以監聽轉換完成后/給聲明變量賦值

• 3.點擊上傳按鈕發送axios/上傳成功重新請求用戶信息實現信息刷新

代碼:

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

}
</script>

以上就是“js怎么利用FileReader實現圖片轉base64格式并上傳預覽頭像”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。