网站浏览速度,软件软件开发,建设校园网站必要性,南昌简单做网站本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇 以下代码可直接复制使用#xff01;注意第9行的图片地址更改下
templatediv classcontentdiv获取图片的base64/divinput typefile …本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇 以下代码可直接复制使用注意第9行的图片地址更改下
templatediv classcontentdiv获取图片的base64/divinput typefile idinputimg changeuploadPic($event) /img classimg_box idimg_box :srcimgsrc altdiv{{imgsrc}}/divimg classimg2 idimg2 src/assets/logo.png altel-button clickgetBase64通过img元素的src获取base64 pdf等一样套路/el-button/div
/templatescript
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 blobxhr.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()},}
}
/scriptstyle
/style
