vue input上传图片，实时预览

1.html

<div class="rz-picter">
             <img :src="avatar" class="img-avatar">
  <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic">
  </div>

2.js

data() {
       return {
         avatar: require('../assets/jia.jpg'),
      }
     },

图片一定要以require 的方式引入 这里的图片仅用来美化 并不是上传的图片

3.js写方法

changeImage(e) {
        var file = e.target.files[0]
        var reader = new FileReader()
        var that = this
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.avatar = this.result
        }
      },

5.运用原生javascript我做了一个判断图片是否上传的的判断

if(document.getElementById('uppic').value.length == '') {
           Toast('请上传图片');
           return
 }