七牛云上传图片

                                                             页面部分

 <el-upload
//这是七牛云地址 （华东-浙江 ）
            action="https://upload.qiniup.com"
 //这是自动上传
             :auto-upload="true"
// 点击上传 ；触发
            :on-success="uploadSuccess"
// 获取的 本地token
            :data="upload_data"
// 上传错误的提示
            :on-error="uploadError"
          >
            <!-- <el-upload
// 后端获取图片token的地址
            action="http://127.0.0.1:8000/brands/upload/files/"
            :auto-upload="true"
            :on-success="handleSuccessed"
          > -->
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
          <br><br>

          <button @click="add">添加头像</button><br>

          <h1><el-button type="text">地址管理</el-button></h1>

                                              交互部分：

 data() {
        return {

// 七牛云空间地址
          baseUrl: "http://rhepekb89.hd-bkt.clouddn.com/",
// 图片完整地址
      imgUrl: "",
// 获取后端的 token
     upload_data: {
        token: "",
      },
        };
    },

                                                     挂在里面获取后端token

 Axios.get("http://127.0.0.1:8000/addapp/")
        .then((dat) => {
          console.log("获取头像的响应", dat);
          this.list = dat.data.data;;

        })
        .catch((err) => {
          console.log(err.response);
        });
    

                                        点击上传图片在 methods 事件里触发

 uploadSuccess(res, files) {
      console.log("上传后的结果是>>>", res);
      console.log("上传后文件的的结果是>>>", files);
      // 拼接图片地址
      this.imgUrl = this.baseUrl + res.key;

      console.log("imgurl>>>", this.imgUrl);
    },
    uploadError(err) {
      console.log(err);
    },

                                               将图片添加到后端

Axios.post("http://127.0.0.1:8000/addapp/",{img:this.imgUrl})
        .then((dat) => {
          console.log('添加头像的响应;',dat)
        })
        .catch((err) => {
          console.log(err.response,'添加头像失败的响应');
        });