vue2如何通过后端接口使用el-upload组件上传文件（保姆级教学）

• 首先，axios的请求拦截器

• 其次，api里的的请求方式和传参

• 最后，就是代码部分了

> HTML部分
 <div class="wap_left_icon">
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :file-list="file"
                >
                  <div class="left_icon" @click="handleHeaderPic">
                    <img :src="avatar" alt="" class="icon" />
                    <div class="warp_text">{{ user.nikeName }}</div>
                  </div>
                </el-upload>
   </div>
   

> method部分
   // 上传文件之前的钩子
    async beforeAvatarUpload(file) {
      //这里不要用element自带的那个赋值，可能到时候格式也是不对的
      let fd1 = new FormData();
      fd1.append("file", file);
      // 把拿到的数据赋值给接口的data中
      let result = await this.$API.updateAvatar(fd1);
      //请求成功后的提示
      this.$message({
        message: result.message,
        type: "success",
      });
      //刷新更新头像
      this.avatar = result.data + "?" + new Date().getTime(); //new Date().getTime()使用时间戳更换每次的修改的图片
    },

项目页面=>