通过文件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.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>

通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64相关推荐

python获取网页图片_Python获取网页上图片下载地址的方法
本文实例讲述了Python获取网页上图片下载地址的方法.分享给大家供大家参考.具体如下: 这里获取网页上图片的下载地址是正在写的数据采集中的一段,代码如下: #!/user/bin/python3 i ...
base64格式图片转换成二进制流并生成图片文件
1.base64格式图片转换成二进制流并生成图片文件 /*** 将base64格式的字符串转换成二进制流,并转换成图片*/ public boolean changeBase64ToImage(Str ...
php 获取内容页图片,织梦DEDECMS内容页获取图片URL地址的方法
织梦DEDECMS内容页获取图片URL地址的方法 {dede:sql sql="select * from dede_uploads where arcid = ~id~"} [f ...
Android获取系统相册图片选中地址，获取手机中的所有图片地址自定义相册
一.获取手机中的值 1.首先在使用读写sd卡权限 2.获取手机中的所有图片: 注意代码中的getGalleryPhotos(getContentResolver()) 方法获取所有地址获取所有图片地 ...
fer2013的csv文件转换为ImageNet格式（以图片格式保存在各自类别的文件夹中）
1.fer2013数据集下载 fer2013源文件fer2013.csv的下载: 链接:BD网盘提取码:nq6h 2.转换代码代码文件不传CSDN资源,直接给代码 # -*- encoding: ...
html里的图片地址怎么搞,HTML图片的地址怎么写
回答: -//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xHTML1/DTD/xHTML1-transition ...
JavaScript 技术篇-简单的两行js代码获取password不可见密码实例演示，js获取密码输入框里的值
如下图,chrome 控制台. 先获取到密码框的dom节点,再通过value就能获取到不可见的值. 密码框如下,其id是password. 右键检查元素可以定位到该元素的 dom 节点,里面直接会显示 ...
JS获取字符串的第一个汉字，获取字符串的第一个英文字母，JS 获取第一个字符
JS部分代码 //第一种方法 var str = "哈哈,我是一个字符串"; var index = escape(str).indexOf( "%u" ); ...
显示服务器图片url,服务器上图片的url地址
服务器上图片的url地址内容精选换一换分析并识别用户上传的图像内容是否有敏感内容(如涉及政治人物.暴恐元素.涉黄内容等),并将识别结果返回给用户.在使用图像内容审核之前需要您完成服务申请和认证鉴 ...
C# 网络编程之webBrowser获取网页url和下载网页中图片
该文章主要是通过C#网络编程的webBrowser获取网页中的url并简单的尝试下载网页中的图片,主要是为以后网络开发的基础学习.其中主要的通过应用程序结合网页知识.正则表达式实现浏览.获取url.下 ...

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

通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64相关推荐

最新文章

热门文章