需求：上传图片并获取base，用的是input file功能上传
注意点：input上传相同文件不触发的原因。需要将inputDOM.value = null (不过置空后 29行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据–就是图片文件） )
以下代码可以直接复制使用！！！有效的点赞
<template><div class="content"><input type="file" class="box-orc-input" @change="uploadPic($event)" /><img class="img_box" :src="imgsrc" alt=""><div>{{imgsrc}}</div></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('图片的base64码，可以直接赋值给img的src显示图片', base)_this.imgsrc = baseconsole.log()}inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 29行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是图片文件） )},}}</script><style>.img_box {/* width: 100px;height: 100px; */}.content {padding: 20upx;}</style>
如果觉得《input上传图片；input上传file；vue上传图片。》对你有帮助，请点赞、收藏，并留下你的观点哦！
