上传和更改头像

来吧，展示：

 

 上传头像流程图：

 

 流程解析：前端用户登录，点击上传按钮，前端请求后端接口，jwt进行身份验证，验证通过接收文件实体，收到文件实体后要么写入硬盘，要么写入数据库，最后把文件地址返回给前端。

上传头像代码展示：

# 上传头像
class FileUpload(BaseHandler):
    # 做用户鉴权
    @jwt_auth
    async def post(self):

        # 接收文件实体
        file = self.request.files["file"]
        # 上传分类 0上传文件 1上传头像
        upload = self.get_argument('upload',0)

        # 遍历文件
        for meta in file:
            # 获取文件名
            filename = meta["filename"]
            # 写入硬盘
            with open('./static/'+ filename,'wb') as f:
                f.write(meta["body"])

        # 判断数据类型   avtar 数据库图片路径的字段名
        if int(upload) == 1:
            self._cuser.avtar = filename
            # 异步修改
            await self.application.objects.update(self._cuser)

        return self.finish({"errcode":0,"msg":"文件上传成功","filename":filename})

数据库信息：

 前端要写更换的按钮和接收后端传来的url：

更换按钮：

<van-uploader :after-read="afterRead" />

前端：

<template>
  <div>
    <van-image
            round width="10rem" height="10rem" :src="src"/>


                    <van-uploader :after-read="afterRead" />
  </div>
</template>

<script>
export default {
    data() {
    return {
      // 头像地址
      src:"",
      

    }
  },
  methods:{
    // 文件上传
    afterRead(file){

      //单独声明表单
      let data = new FormData();
          //添加数据
          data.append('file',file.file);
          data.append('upload',1);
          data.append("token",localStorage.getItem("token"));
          //声明文件配置
          const axiosconfig = this.axios.create({withCredentials:false});

          //发起请求
          axiosconfig({

            method:"post",
            url:this.baseurl+"upload/",
            data:data

          }).then(data=>{

             console.log(data);
    
                  this.src = this.baseurl+"/static/"+data.data.filename;

                  console.log(this.src);

                  if(data.data.errcode == 0){

                        window.location.reload();

                  }


          });

    },
    
  created(){

      // 判断用户是否登录
      if(localStorage.getItem('token') !=null){
        this.email=localStorage.getItem('email')
      }else{
        this.email='';
      }

      //获取头像
      this.myaxios(this.baseurl+"userinfo/","get").then(data =>{

              console.log(data);

              if(data.cate == 0){

                this.avtar = this.baseurl+"static/"+data.avtar

              }else{
                this.avtar = data.avtar;
              }

              
              localStorage.setItem("cate",data.cate)

        });

  }
    

  },

}
</script>

<style>

</style>