vue上传图片并显示

上传html代码

	<label for="file" class="pull-id">
	<input type="file" style="display:none;" @change="uploads($event)" ref="front" id="file">
	<img :src="path+img" alt="" class="default" ref="goodsImg" id="portrait">
	</label>

js代码

uploadImg(param) {
			this.$axios({
          url: '',//接口地址
          method: '',//请求方式
          data: param,//传输的数据
        })
          .then(res => {
            if (res.data.code == 0) {
								this.img = res.data.data.cardimg;//上传成功显示图片
            } else {
							this.$toast(res.data.msg);//失败输出失败信息
							this.img=res.data.data;
              this.$refs.goodsImg.src=res.data.data;
            }
          })
          .catch(err => {
            console.log(err)
          })
			}

getFileType(filePath) {
				var startIndex = filePath.lastIndexOf(".");//检测文件类型
        if (startIndex != -1)
        return filePath.substring(startIndex + 1, filePath.length).toLowerCase();
        else return "";
      }

//获取图片
uploads(event) {
				var paths = this.$refs.front.value;//源文件路径
				var fileType = this.getFileType(paths);//获取文件的后缀名
        if ("jpg" != fileType && "jpeg" != fileType && "png" != fileType && "gif" != fileType) {
          this.$toast("请上传JPG,JPEG,PNG,GIF格式的图片");
          return false;
				}
				this.submit();
      }

submit() {
				var DOM = this.$refs.front;//获取input dom节点
				var file = DOM.files[0]; //获取文件详细信息
        var param = new FormData();
        param.append('idcard_img', file);
        this.uploadImg(param);
			}

great: function () {
    		document.getElementById('file').onchange = function () {
					alert('msg');
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
            document.getElementById('portrait').src = fr.result;
        };
        fr.readAsDataURL(imgFile);
    }
}