vue实现上传图片和显示图片

上传图片并显示

点击上传文件的input的时候，将图片上传到页面上，并且显示已经上传的图片，同时也可以保存到后台

// 因为input的上传按钮，会显示的比较突兀，所以在点击div的时候判断是否存在了上传文件的input，如果没有的话就新建一个上传文件的控件，且隐藏起来，不会占据页面位置，在change的时候将文件的数据获取到并传到页面的img里面，实现类似vue-element的文件上传的效果//实现代码<template><div class="alert-box-item"><div class="bigImg-div" @click="toGetImg"><img class="bigImg" :src=valueUrl v-if="valueUrl"></div></div></template><script>let inputElement = nullexport default {data() {return {valueUrl: ''}},methods: {toGetImg() {if (inputElement === null) {// 生成文件上传的控件inputElement = document.createElement('input')inputElement.setAttribute('type', 'file')inputElement.style.display = 'none'if (window.addEventListener) {inputElement.addEventListener('change', this.uploadFile, false)} else {inputElement.attachEvent('onchange', this.uploadFile)}document.body.appendChild(inputElement)}inputElement.click()},uploadFile(el) {if (el && el.target && el.target.files && el.target.files.length > 0) {console.log(el)const files = el.target.files[0]const isLt2M = files.size / 1024 / 1024 < 2const size = files.size / 1024 / 1024console.log(size)// 判断上传文件的大小if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!')} else if (files.type.indexOf('image') === -1) { //如果不是图片格式// this.$dialog.toast({ mes: '请选择图片文件' });this.$message.error('请选择图片文件');} else {const that = this;const reader = new FileReader(); // 创建读取文件对象reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件reader.onload = function() { // 文件读取完成后// 读取完成后，将结果赋值给img的srcthat.valueUrl = this.result;console.log(this.result);// 数据传到后台//const formData = new FormData()//formData.append('file', files); // 可以传到后台的数据};}}}},beforeDestroy() {if (inputElement) {if (window.addEventListener) {inputElement.removeEventListener('change', this.onGetLocalFile, false)} else {inputElement.detachEvent('onchange', this.onGetLocalFile)}document.body.removeChild(inputElement)inputElement = nullconsole.log('========inputelement destroy')}}}</script><style>.alert-box-item {overflow: hidden;}.bigImg-div {width: 200px;height: 200px;border-radius: 100%;overflow: hidden;border: 1px solid #ddd;}.bigImg {display: block;width: 200px;height: 200px;border-radius: 100%;}</style>

图片：

上传的文件