vue实现 上传图片 预览，亲测有效

<template>
 <p @click="upimage">从相册中选取</p>
<input type="file"   ref="fileInput"  accept="image/*" @change="getFile" style="display: none">`
</template>
2.` 
<script>
export default {
 data(){
	  return{
	   			   userImg:'',  // 头像
	          }
	   },
	   methods:{
       			    // 第一步
        //从相册中上传
        upimage1(){
             this.$refs.fileInput.click();
        },
        //第二部 预览图片
        getFile (event) {
            const files = event.target.files
            let filename = files[0].name          //只有一个文件
            if ( filename.lastIndexOf('.') <= 0 ) {
                return alert("Please add a valid image!")        //判断图片是否有效
            }
            const fileReader = new FileReader()                //内置方法new           	     FileReader()   读取文件
                fileReader.addEventListener('load',() => {
                this.userImg = fileReader.result
            })
                fileReader.readAsDataURL(files[0])
                this.image = files[0]
                //到这里后, 选择图片就可以显示出来了
                this.changeimage = false;    // 点击查看头像关闭选项
        } ,
          //第四步: 上传文件了
        onUpload (event) {
            event.preventDefault();
            let fd = new FormData()              //内置方法new FormData()  新建一个表格
            fd.append('file',this.image)          //把image添加进去
            console.log(this.image)                                    //(       第二次有效打印           )
            this.axios.post(this.basURL.votUrl,fd).then( res => {                 //第一个参:this.postUrl就是上面保存好的要上传的地址
            console.log(res)                                               //(      第三次有效打印    )
                if(res.status === 200 && res.data ){
                let data = res.data.data
                let imageUrl = data.url                                        //上传成功 , 后台返回了一个图片地址
                this.imageUrl = imageUrl
                }
            }).catch(error => {
                console.log(error)
            })
        }
       }
    
        }
        </script>,`