vueでアイコンをアップロードする方法と実現?

1.まず、アップロードに関する要求(1)フォーマット要求(jpg|png|jpeg|gif)(2)サイズ要求(例えば300 kbを超えない)(3)サイズ制限(1:1,4:9,9:16)(4)カット可能か(5)枚か複数枚(一般的に使用者の顔に使用)
2.html部分

<template>
  <div class="hello">
    <div class="user-header">
      <input type="file" name="image" accept="image/*" @change='onchangeImgFun'
       class="header-upload-btn user-header-com">
      <img  alt="" :src='imgStr' class="user-header-img user-header-com">
      <p class="tip">    50kb <span class="error">{
    {errorStr}}span>p>
    div>
  div>
template>

3.css部

4.js部分

export default {
     
  name: 'HelloWorld',
  data () {
     
    return {
     
      imgStr: require('../assets/upload.png'),
      errorStr: ''
    }
  },
  methods: {
     
    onchangeImgFun (e) {
     
      var file = e.target.files[0]
      console.log(file)
      //        ，       
      let imgSize = file.size
      console.log(imgSize)
      var _this = this // this    ，        
      //         5M  ，          b
      if (imgSize <= 50 * 1024) {
     
        //   
        _this.errorStr = ''
        console.log('    ')
        //          
        //        1
        // this.imgStr = window.URL.createObjectURL(e.target.files[0])
        // console.log(window.URL.createObjectURL(e.target.files[0]))                  //          
        
//base64   2
 var reader = new FileReader()
        reader.readAsDataURL(file) //    base64
        reader.onloadend = function () {
     
          //     base64   ,        img   src    
          var dataURL = reader.result
          console.log(dataURL)
          _this.imgStr = dataURL
          //       
        }
      } else {
     
        console.log('     ')
        _this.errorStr = '        '
      }
    }
  }
 }