通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64

本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇

以下代码可直接复制使用！注意第9行的图片地址更改下

<template>
  <div class="content">
    <div>获取图片的base64</div>
    <input type="file" id="inputimg" @change="uploadPic($event)" />
    <img class="img_box" id="img_box" :src="imgsrc" alt="">

    <div>{{imgsrc}}</div>

    <img class="img2" id="img2" src="@/assets/logo.png" alt="">
    <el-button @click="getBase64">通过img元素的src获取base64 pdf等一样套路</el-button>

  </div>
</template>

<script>
function ie9 () {
  if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    return true
  } else {
    return false
  }
}
export default {
  data () {
    return {
      imgsrc: '',
    }
  },

  methods: {
    // 通过input上传图片
    uploadPic (event) {
      console.log(event)
      if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {
        return this.$message.warning('请选择上传图片，格式支持：.png 或 .jpeg 或 .jpeg')
      }
      if (ie9()) {
        this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')
        retrun
      }
      //iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。
      let inputDOM = event.target
      let _this = this
      var reader = new FileReader()
      reader.readAsDataURL(inputDOM.files[0])
      reader.onload = function (e) {
        var base = e.target.result

        let res = base.split(',')
        console.log(1111, e)
        console.log('方式1：图片的base64码，可以直接赋值给img的src显示图片', base)
        _this.imgsrc = base
        console.log()

      }

      // inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 29行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是图片文件）   )
    },
    getBase1 () {
      var imgFile = new FileReader()
      console.log(imgFile)
      // try {
      //   // 使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src
      //   imgFile.readAsDataURL(document.getElementById('img_box').files[0])

      //   imgFile.onload = function (e) {
      //     console.log(e)
      //     var image = new Image()
      //     image.src = e.target.result //base64数据
      //     image.onload = function () {
      //     }
      //   }

      // } catch (e) {
      //   console.log("请上传图片！" + e)
      // }


    },
    getBase64 () {
      let _this = this

      console.log(document.getElementById('img2'))
      console.log(document.getElementById('img2').src) //因为图片的src 默认可能不是base 而是后端返回的其他地址
      let imgUrl = document.getElementById('img2').src
      if (!imgUrl) {
        return false
      }
      window.URL = window.URL || window.webkitURL
      var xhr = new XMLHttpRequest()
      xhr.open("get", imgUrl, true)
      // 至关重要
      xhr.responseType = "blob"
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          var blob = this.response
          console.log("blob", blob)
          // 至关重要
          let oFileReader = new FileReader()
          oFileReader.onloadend = e => {
            // 此处拿到的已经是 base64的图片了
            let base64 = e.target.result
            console.log("方式一》》》》》》》》》", base64)

            _this.imgsrc = base64
          }
          oFileReader.readAsDataURL(blob)
          // //====为了在页面显示图片，可以删除====
          // var img = document.createElement("img")
          // img.onload = function (e) {
          //   window.URL.revokeObjectURL(img.src) // 清除释放
          // }
          // let src = window.URL.createObjectURL(blob)
          // img.src = src
          // //document.getElementById("container1").appendChild(img);
          // //====为了在页面显示图片，可以删除====

        }
      }
      xhr.send()
    },
  }
}
</script>

<style>
</style>