vue使用axios上传文件的一种方法

HTML部分

    <div  @click="setuserifo">
         上传文件
          <input class="file" name="file" type="file" ref="fil" >   // 这个input让其透明度为零
    </div>

Methods部分

     setuserifo(){
        var that = this;
        let file = this.$refs.fil.files[0];   //拿到表单文件
        let param = new FormData(); //创建form对象
        param.append("name", this.username); //向from对象添加数据
        param.append("head", file);

        let config = {
             headers: { "Content-Type": "multipart/form-data" } // 设置axios的headers
         }

         p_setuserinfo(param, config).then(res => { console.log(res) } // 调用api
   }

如果直接点击按钮就上传的话

html部分

<input class="file" name="file" type="file" @click="update($event, 10086)" > 

methods部分

   update(e, id) {
        // console.log(e.target.files[0], id);
        var that = this;
        let file = e.target.files[0];
	........
   }

请求的接口

    export function p_setuserinfo(parm, header) {
        return axios.post(
          ("接口地址"), parm, header
        ).then(res => { return res })
}