vue使用element實現本地預覽，最主要的是將圖片路徑轉換為base64，供大家參考，具體內容如下

HTML

<el-upload class="avatar-uploader" action="123" //這個路徑不重要，可以隨便寫 :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

js部分

<script> export default {  data() {   return {    imageUrl: '',   };  },  methods: {   handleAvatarSuccess(res, file) {    this.imageUrl = URL.createObjectURL(file.raw);   },   beforeAvatarUpload(file) {    const isJPG = file.type === 'image/jpeg';    const isLt2M = file.size / 1024 / 1024 < 2;    if (!isJPG) {     this.$message.error('上傳頭像圖片只能是 JPG 格式!');    }    if (!isLt2M) {     this.$message.error('上傳頭像圖片大小不能超過 2MB!');    }    return isJPG && isLt2M;   },   //當上傳圖片后，調用onchange方法，獲取圖片本地路徑   onchange(file,fileList){     var _this = this;        var event = event || window.event;        var file = event.target.files[0];        var reader = new FileReader();         //轉base64        reader.onload = function(e) {         _this.imageUrl = e.target.result //將圖片路徑賦值給src        }        reader.readAsDataURL(file);   }  } }</script>

現在就可實現圖片本地預覽了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。