前端：上傳頭像功能

使用到的ui库 ：quasar    框架：vue

业务操作：点击一个按钮，弹出文件选择框，选择文件上传头像

html

<q-btn :label="'上传头像'"
       color="white"
       size="md"
       @click="handleUpload" /> //该函数中去触发input的change事件
<input type="file"
       @change="handle" // 上传处理
       ref="files" 
       accept=".jpg,.jpeg,.png" //上传文件格式限制
       style="margin: 0px;display: none;">

js

  //打开选择文件的界面
   handleUpload() {
    const input = this.$refs.files
    input && input.click()
  }
  
  // 获取上传的文件，向后端发送请求
  handle(e) {
    let files = e.target.files
    const formData = new FormData()
    // 上传的文件
    formData.append('file', files[0])
    //  后端规定要传的参数
    formData.append('xxx', xxx)
    //此处为想后端发送请求，上传文件（返回的数据，头像链接再赋值给img的src）
    axios....
    
  }