Vue中图片转base64格式

最新推荐文章于 2025-05-29 15:46:28 发布

原创最新推荐文章于 2025-05-29 15:46:28 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

Vue框架专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在Vue应用中将本地图片转换为Base64格式。首先，需要在main.js中定义一个转换函数并挂载到全局变量。接着，在组件内部，通过监听文件上传事件，调用该函数完成图片到Base64的转换。

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

1.首先在main.js中写一个函数并将函数挂载在全局变量中

// 图片转base64格式 挂载在全局
Vue.prototype.$base64Img = (e) => {
  return new Promise(function (resolve, reject) { // 使用Promise进行异步处理
    let fileSize = 0
    const fileMaxSize = 1024 // 设置图片最大为 1M
    fileSize = e.target.files[0].size // 获取图片大小
    const size = fileSize / 1024
    const file = e.target.files[0] // 获取图片文件对象
    const reader = new FileReader() // 实例化一个对象
    if (size > fileMaxSize) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小必须小于1M' })
    } else if (size <= 0) {
      e.target.value = '' // 内容清空
      resolve({ err: '图片大小大小不能为0M' })
    } else {
      reader.readAsDataURL(file) // 把图片文件对象转换base64
      reader.onload = function (e) {
        resolve(e.target.result) // 回到函数返回base64值
      }
    }
  })
}

2. 在组件中的代码是

<template>
  <div class="register">
    <!-- PC端点击打开文件选择图片 -->
      <label for="img">
        <input type="button" id="btn" value="请上传识别图像" >
        <span id="text"></span>
        <input type="file" name="img" id="img" @change="handleFile"><br /><br />
      </label>
  </div>
</template>

<script>
export default {
  methods: {
    handleFile (e) {
      var filePath = document.querySelector('#img').value
      var arr = filePath.split('\\')
      document.querySelector('#text').innerHTML = arr[arr.length - 1]
      this.$base64Img(e).then((res) => { // 调用全局方法
        console.log(res) // 控制台打印出图片base64值
      })
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.register{
  height: 100%;
  width: 100%;
  background: url('http://ahnu.co.cnki.net/Themes/default/images/loginBg.jpg') no-repeat;
  background-size: 105% 100%;
  padding-top: 200px;
}
.imagefile{
  width: 100%;
}

label{
  position: relative;
}
#img{
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
#btn{
  margin-right: 5px;
  padding: 5px 10px;
  background: #00b0f0;
  color: #FFF;
  border: none;
  border-radius: 5px;
}
#text{
  color: black;
}

</style>

3.当你点击文件上传后，就可以实现本地图片转base64格式