需求：上傳圖片并獲取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上传图片。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。