本篇是通过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.targetlet _this = thisvar reader = new FileReader()reader.readAsDataURL(inputDOM.files[0])reader.onload = function (e) {var base = e.target.resultlet res = base.split(',')console.log(1111, e)console.log('方式1：图片的base64码，可以直接赋值给img的src显示图片', base)_this.imgsrc = baseconsole.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 = thisconsole.log(document.getElementById('img2'))console.log(document.getElementById('img2').src) //因为图片的src 默认可能不是base 而是后端返回的其他地址let imgUrl = document.getElementById('img2').srcif (!imgUrl) {return false}window.URL = window.URL || window.webkitURLvar xhr = new XMLHttpRequest()xhr.open("get", imgUrl, true)// 至关重要xhr.responseType = "blob"xhr.onload = function () {if (this.status == 200) {//得到一个blob对象var blob = this.responseconsole.log("blob", blob)// 至关重要let oFileReader = new FileReader()oFileReader.onloadend = e => {// 此处拿到的已经是 base64的图片了let base64 = e.target.resultconsole.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>