2024年前端最新vue3实现图片上传转base64格式_vue3 图片转base64(1)，2024年最新面试建议着正装

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

使用一个<input>元素来上传图片，并使用JavaScript的FileReader API将图片转换为Base64编码。

<template>
  <div class="avatar-upload">
    <label for="avatar-upload-input">
      <img :src="form.formObj.user_pic ? form.formObj.user_pic : '../../../public/default.jpg'" id="avatar-preview" alt="Avatar preview">
      <p style="margin-bottom: 15px;">头像上传</p>
    </label>
    <input type="file" @change="updataAvatar" id="avatar-upload-input" style="display: none;">
</div>
</template>

<script setup>
import { updataAvatarApi, userinfoApi,updataUserInfo } from '../../utils/api'
import { Message } from 'view-ui-plus'
import { onMounted, reactive, ref } from 'vue'
let form = reactive({
  formObj: {
    username: '',
    nickname: '',
    email: '',
    user_pic: '',
    id: ''
  }
})
onMounted(() => {
  getUserInfo()
})
// 头像上传
const updataAvatar = (event) => {
  // 获取文件
  let file = event.target.files[0]
  // 图片base64
  const reader = new FileReader();
  if(file) {
    reader.onload = (e) => {
      // e.target.result 就是转化成base64的图片地址 传给后端
      console.log(e.target.result);
      updataAvatarApi({ avatar: e.target.result }).then(res => {
        if(res.code === 0) {
          Message.success(res.message)
          // 重新获取用户信息
          getUserInfo()
        } else {
          Message.success(res.message)
        }
      })
    };
  }
  // 读取文件
  reader.readAsDataURL(file);
}
// 用户信息
const getUserInfo = () => {
  userinfoApi().then(res => {
    if(res.code === 0) {
      form.formObj = res.data
    } else {
      Message.error(res.message)
    }
  }).catch(err => console.log(err))
}


### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)