上传图片转换base64

鲨鱼辣椒️面

于 2022-06-17 20:20:55 发布

阅读量753

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_46451513/article/details/125339692

版权

此篇博客介绍了如何在前端使用FileReader进行文件类型检查和大小限制，展示了如何通过`getBase64`函数将用户上传的JPG头像转换为Base64格式，并确保不超过2MB。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//工具函数
const getBase64 = (img, callback) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

 beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      /*调用*/
      getBase64(file, (url) => {
        this.imageUrl = url//得到的是base64的图片
        this.form.avatar = file//的到的是图片路径
      })
      return false
    },
  },