温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js怎么利用FileReader实现图片转base64格式并上传预览头像

发布时间:2022-05-23 11:26:42 来源:亿速云 阅读:461 作者:iii 栏目:开发技术

今天小编给大家分享一下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格式并上传预览头像”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI